一、前提

前段时间要做一个九宫格切图的功能，但是因为九宫格主要是正方形切割，这就不可避免的需要裁剪图片。但是在找遍了全网之后，发现并没有一个很好用的微信小程序裁剪图片组件，很多人推荐的也是前端使用的，在小程序中怎么使用甚至能不能用都是个问题。所以，一拍腿！干脆自己做一个吧！

二、组件详情

2.1 组件预览

首先上组件的预览，看看做出来的效果

2.1.1 图片操作

以下分别为__双指缩放、单指移动、裁剪框拖动、图片旋转，旋转90度，镜像+还原__

2.1.2 生成图片

点击右下角的对勾可以生成裁剪后的图片

2.2 组件使用说明

2.2.1 获取组件

码云Gitee地址：https://gitee.com/yeyouzi/yeyouzi-cropper

GitHub地址：https://github.com/yeyouzi-0/yeyouzi-cropper

CSDN地址：https://blog.csdn.net/qq_42669159/article/details/121111203?spm=1001.2014.3001.5502

2.2.2 使用说明

安装教程

1.  下载整个仓库

2.  在小程序文件夹中新建components文件夹

3.  将文件夹yeyouzi-cropper复制到components文件夹中

使用说明

按照小程序自定义组件使用方法使用即可

1. 在json文件中修改usingComponents

"usingComponents": {
   "yeyouzi-cropper": "/components/yeyouzi-cropper/yeyouzi-cropper"//yeyouzi-cropper文件夹的路径
}

2.  将组件写入到wxml文件中

3.  在js文件中，通过id获取组件，并使用init函数初始化裁剪工具，通过回调函数获取临时路径

this.cropper = this.selectComponent("#yeyouzi-cropper");
this.cropper.init({
    imgPath: path,  //imgPath是需要裁剪图片的图片路径，只支持本地或临时路径
    success(res){
        console.log(res) //res即裁剪成功后的图片临时路径
    },
    fail(error){
        console.log(error) //有两种:cancel代表点击了叉，fail代表wx.canvasToTempFilePath生成图片失败
    }        
});

2.3 组件试用

2.3.1 使用微信直接扫描以下二维码可以试用该组件

2.3.2 想要体验更多功能也可以扫描以下二维码，谢谢😘