微信小程序(二十) - 图片裁剪-we-cropper本次系列文章参与八月的更文活动，记录一个微信小程序从零到有的开发过

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第20天，点击查看活动详情

本次系列文章参与八月的更文活动，记录一个微信小程序从零到有的开发过程。本文为本系列第二十篇：图片裁剪-we-cropper

本项目需要完成编辑学生信息，涉及上传头像。于是就有了裁剪头像的需求，增加对头像裁剪的功能，即有益于减小图片大小从而减少占用服务器资源，又有益于用户个性化定制头像。

于是选用了we-cropper,一款灵活小巧的canvas图片裁剪器

源码地址

官方文档

需求简述

点击头像，弹出拍照和相册选择框，选中图片后，进入裁剪头像页面，裁剪完成则上传图片至服务器，成功后返回首页继续修改信息。

ui图如下所示

安装

克隆至本地（本次demo使用方式）

git clone https://github.com/we-plugin/we-cropper.git

2.也可以使用npm引入

npm install we-cropper --save

使用

1.先放置裁剪容器

先引入we-cropper.wxml

<import src="../we-cropper/we-cropper.wxml"/>
<view class="clipbg" wx:if="{{clip}}">
<view class="cropper-wrapper" >
    <template is="we-cropper" data="{{...cropperOpt}}" />
</view>
<view class="cropper-buttons" style="height: calc(100vh - {{cropperOpt.height}}px);">
   <view  class="cancle"  bindtap="cancleuploadTap"> 取消
   </view>
  <view class="getCropperImage"  bindtap="uploadTap"> 使用
  </view>
 </view>
</view>

2.设置参数，在data中初始化cropperOpt的参数。可自定义配置画布宽度高度，裁剪框的宽度高度和起始位置等等。

先引入we-cropper.js

import WeCropper from '../we-cropper/we-cropper.js'
    
    const device = wx.getSystemInfoSync() // 获取设备信息
    const width = device.windowWidth // 示例为一个与屏幕等宽的正方形裁剪框
    const height = width
    
    Page({
      data: {
          cropperOpt: {
            id: 'cropper', // 用于手势操作的canvas组件标识符
            targetId: 'targetCropper', // 用于用于生成截图的canvas组件标识符
            pixelRatio: device.pixelRatio, // 传入设备像素比
            width,  // 画布宽度
            height, // 画布高度
            scale: 2.5, // 最大缩放倍数
            zoom: 8, // 缩放系数
            cut: {
              x: (width - 200) / 2, // 裁剪框x轴起点
              y: (width - 200) / 2, // 裁剪框y轴期起点
              width: 200, // 裁剪框宽度
              height: 200 // 裁剪框高度
            }
          }
      }
    })

2.在页面onload函数中实例化WeCropper

   onLoad (option) {
        const { cropperOpt } = this.data
        
        this.cropper = new WeCropper(cropperOpt)
            .on('ready', (ctx) => {
                console.log(`wecropper is ready for work!`)
            })
            .on('beforeImageLoad', (ctx) => {
                wx.showToast({
                    title: '上传中',
                    icon: 'loading',
                    duration: 20000
                })
            })
            .on('imageLoad', (ctx) => {
                wx.hideToast()
            })
    }

3.事件绑定：触发以下方法接收对图片进行拖拽缩放的事件对象。

 touchStart (e) {
   this.cropper.touchStart(e)
},
 touchMove (e) {
    this.cropper.touchMove(e)
 },
 touchEnd (e) {
    this.cropper.touchEnd(e)
 }

4.实现业务逻辑：

点击拍照或从相册选择图片成功后使用pushOrign载入图片

//从相册中选择图片
uploadPicture(){
   var that=this;
   wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album'],
          success (res) {
             const tempFilePaths = res.tempFilePaths[0];
             that.cropper.pushOrign(tempFilePaths);
            }
          })
}

载入成功后，用户缩放调整画布中的图片完成后，点击使用按钮将裁剪后的图片上传到服务器。

 getCropperImage () {
      this.wecropper.getCropperImage((tempFilePath) => {
        // tempFilePath 为裁剪后的图片临时路径
        if (tempFilePath) {
          wx.previewImage({
            current: '',
            urls: [tempFilePath]
          })
        } else {
          console.log('获取图片地址失败，请稍后重试')
        }
      })
     }

综上即完成了头像裁剪需求。