微信小程序之图片裁剪

时间：2022-08-11 09:00:01

本篇博客用于解决微信小程序图片裁剪问题

图片裁剪常用于头像选择和图片合成

图片裁剪解决方案：

　　目前网络上知名的微信小程序图片裁剪插件是we-cropper。

　　通常只需要下载对应的文件放到项目的目录里：

　　　　（1）在wxml文件中引入we-cropper.wxml          引入方式参考<import src="../dist/we-cropper.wxml"/>

　　　　（2）在你既定的页面模块中加入插件的模板（canvas）       <template is="we-cropper" data="{{...cropperOpt}}"/>

　　　　（3）在js文件中引入we-cropper.js                      引入方式 import WeCropper from '../dist/we-cropper.js'

　　　　（4）在data中配置裁剪参数，高宽可以自行定义常量来计算。

　　　　

cropperOpt: {
      id: 'cropper',
      width:width, // 画布宽度
      height:height, // 画布高度
      scale: 2.5, // 最大缩放倍数
      zoom: 8, // 缩放系数
      cut: {
        x: (width -200) / 2, // 裁剪框x轴起点(width * fs * 0.128) / 2
        y: (height * 0.5 -200 * 0.5), // 裁剪框y轴期起点
        width: 200, // 裁剪框宽度
        height: 200// 裁剪框高度
      }
}
　　　　
　　　　（5）在onload方法中添加如下代码 
    const { cropperOpt } = this.data

    // 若同一个页面只有一个裁剪容器，在其它Page方法中可通过this.wecropper访问实例
    new WeCropper(cropperOpt)
      .on('ready', (ctx) => {
        console.log(`wecropper8 is ready for work!`)
      })
      .on('beforeImageLoad', (ctx) => {
        console.log(`before picture loaded, i can do something`)
        console.log(`current canvas context: ${ctx}`)
        wx.showToast({
          title: '上传中',
          icon: 'loading',
          duration: 20000
        })
      })
      .on('imageLoad', (ctx) => {
        console.log(`picture loaded`)
        console.log(`current canvas context: ${ctx}`)
        wx.hideToast()
      })

　　　　（6）添加相应控制方法，移动，选择图像，确认截取区域图像

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

　//上传事件
  uploadTap() {
    const self = this

    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success(res) {
        const src = res.tempFilePaths[0];

        self.wecropper.pushOrign(src);
      }
    })
  },

　//获取截图事件，src就是最终得到的截图资源
  getCropperImage() {
    let that=this;
    wx.showToast({
      title: '上传中',
      icon: 'loading',
      duration: 20000
    })
    // 如果有需要两层画布处理模糊，实际画的是放大的那个画布
    this.wecropper.getCropperImage((src) => {
      if (src) {
        that.setData({
          imgSrc: src,
          uploadWindow: false
        })
        wx.hideToast()
        // wx.previewImage({
        //   current: '', // 当前显示图片的http链接
        //   urls: [src] // 需要预览的图片http链接列表
        // })
      } else {
        console.log('获取图片地址失败，请稍后重试')
      }
    })
  },

　　效果参考图，插件提供了双指缩放和移动来调整截取区域，如果截图模糊可以用两层模板，其中隐藏一层放大倍数，最终也是截取放大的canvas，不过需要个人去计算调整相关参数：

　　插件下载：https://github.com/we-plugin/we-cropper

　　参考教程：https://we-plugin.github.io/we-cropper/#/

微信小程序之图片裁剪

 

标签：

相关文章