微信小程序图片上传以及剪切（image-cropper的简单使用）

微信小程序图片上传以及剪切（使用插件image-cropper）

开发到了这个需求，博客鱼龙混杂搜不到合适的，记录一下；

1. 首先打开这个地址,并且可以随便看一下,顺便把文件下载下来一份;
   https://github.com/we-plugin/we-cropper

2. 然后打开we-cropper文件夹下的dist,这就是我们所需要的所有东西;

3. 给dist文件夹改个名字,拉到我们的项目下;(我改的名字就是we-cropper);

4. 下面我们创建一个裁剪图片的新页面(页面中添加也可以便于理解);

5. 在我们的新建裁剪页面下的wxml文件下引入:

	<!-- 这里引入的是我们刚刚拉进来的那个文件夹下的wxml文件 -->
	<import src="../we-cropper/we-cropper.wxml"/>
	
	<view class="cropper-wrapper">
	    <template is="we-cropper" data="{{...cropperOpt}}"/>
	    <view class="cropper-buttons">
	        <view
	                class="upload"
	                bindtap="uploadTap">
	            上传图片
	        </view>
	        <view
	                class="getCropperImage"
	                bindtap="getCropperImage">
	            生成图片
	        </view>
	    </view>
	</view>

6. 再在js文件夹下引入:

//注意路径
import WeCropper from '/components/we-cropper/we-cropper';	

const device = wx.getSystemInfoSync() // 获取设备信息
const width = device.windowWidth // 示例为一个与屏幕等宽的正方形裁剪框
const height = width;
var app = getApp();

  /**
   * 页面的初始数据
   */
  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 // 裁剪框高度
      }
    },
    //用来储存我们裁剪好的图片;
    imgPath:'',
  },
  onLoad (option) {
   const { cropperOpt } = this.data
   
   // 在页面onLoad函数中实例化WeCropper,并且挂载到page上
   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()
    })
 }

7. 这个时候插件基本配置就可以了,接下来写个选取图片和切割图片的方法;

uploadTap () {
	const self = this
	//点击上传图片按钮后获取图片地址，并通过pushOrign方法载入图片
	wx.chooseImage({
	  count: 1, // 默认9
	  // 可以指定是原图还是压缩图，默认二者都有
	  sizeType: ['original', 'compressed'], 
	  // 可以指定来源是相册还是相机，默认二者都有
	  sourceType: ['album', 'camera'], 
	  success (res) {
	    const src = res.tempFilePaths[0];
	    self.cropper.pushOrign(src)
	  }
	})
},


//缩放调整画布中的图片直到满意的状态，点击生成图片按钮，导出图片
getCropperImage () {
   this.wecropper.getCropperImage((tempFilePath) => {
     // tempFilePath 为裁剪后的图片临时路径
     if (tempFilePath) {
       wx.previewImage({
         current: '',
         urls: [tempFilePath]
       });
       this.setData({imgPath:tempFilePath});
       //这个地方我们就可以拿到切割后的图片来做相应的操作了
     } else {
       console.log('获取图片地址失败，请稍后重试')
     }
   })
  }

8. 更多文档说明:

	https://we-plugin.github.io/we-cropper/#/