背景

最近开发一个图片类的小程序，需要用到图片裁切，翻了翻微信的官方文档，居然没有这方面的功能！下来我找了些其他库，感觉都用着不怎么顺手，要么功能不纯粹，要么使用不方便，本着一切功能自己开发的原则，也本着造福各开发者的意图，于是就诞生了这个图片裁切库 – @datagetter.cn/ycc-cropper

推荐理由

1. 完全开源，可任意扩展
2. 超高性能，完全基于canvas操作
3. 用法极简，纯函数式调用
4. 功能强大，拖拽、双击、缩放、旋转、多点触控…
5. 多平台兼容，小程序、H5、PC、UniAPP等，有canvas的地方就能用

大多数小程序组件都是基于Dom的，Dom的性能可想而知，而这款图片裁切库另辟蹊径，适配了小程序新版的Canvas API，所有操作完全基于Canvas进行。无论是图片的绘制，还是图层的遮罩，亦或是裁切的线框，都是用canvas绘制而成，性能完全有保障！

既然基于Canvas进行封装，那么库的灵活性，功能的强大性也得到了显著的提升。除了裁剪的基本设置：裁剪区、裁剪图片以外，ycc-cropper还支持了丰富的手势操作：拖拽改变图片位置，双击对图片进行缩放，甚至还支持双指对图片进行任意角度的旋转！功能相当强大！

兼顾功能的同时，ycc-cropper也提供了极其简单的调用方式，它的使用方法是纯函数式的，不需要在page.json中添加依赖组件，直接调用函数即可使用。下面我们就来看看它在小程序中的具体用法。

使用方法

安装

npm install @datagetter.cn/ycc-cropper --save

wxml文件

<canvas
  type="2d" id="myCanvas"
  bindtouchstart="touchevent" 
  bindtouchmove="touchevent"
  bindtouchend="touchevent">
</canvas>

<!-- 确认裁剪按钮 -->
<button type="primary" size="mini" bindtap="onCropClick">确认</button>

page/index.js脚本文件

// miniprogram/pages/index.js
const Cropper = require('@datagetter.cn/ycc-cropper').default;

Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: async function (options) {
    const self = this;
    // 微信需绑定安全域名，此路径可为微信本地图片路径
    const imageTempUrl = 'http://datagetter.cn:9000/datagetter.cn/public/original/%E5%88%98%E4%BA%A6%E8%8F%B2.jpg';

    wx.createSelectorQuery().select('#myCanvas')
    .fields({ node: true, size: true })
    .exec((res) => {
        // 直接函数式调用 进行初始化
        self.cropper = new Cropper(imageTempUrl,{
            wrapW:wx.getSystemInfoSync().windowWidth,
            wrapH:wx.getSystemInfoSync().windowHeight,
            canvasDom:res[0].node,
            appenv:'wxapp'
        });
    })
  },

  // 确认按钮 处理裁剪后的图片
  async onCropClick(e){
    let res = await cropper.getCropImage('myCanvas');

    // 获取到临时文件路径 res.tempFilePath
    // do something with res.tempFilePath
  },

  // 捕获微信canvas事件
  touchevent(e){
    cropper.ycc.gesture.touchLifeTracer[e.type](e);
  },

})

可以看到，所有需要你在脚本中做的事情，仅仅是new Cropper(imageUrl,option)，取到cropper实例后，调用它提供的方法，或者访问它的属性就可以了，使用非常简单！

具体用法就参考ycc-cropper文档吧！

其他

ycc-cropper除了支持小程序外，这款图片裁剪库还支持在Web端、H5端进行操作，效果和小程序端一模一样，简直是做跨多端APP小伙伴的福音啊！

市面上有很多的图片裁切库，然而能做到多端兼容，纯JS调用，丰富手势支持的库还是很罕见的！经过验证，库的总大小仅为91KB，感兴趣的小伙伴赶紧移步ycc-cropper的npm，去下载来看看吧！

最后，附上我使用ycc-cropper新上的小程序，基于人脸识别技术，挺有意思的呢~