前言：
挺久之前就收到过支付宝社区同学的提问，支付宝小程序内如何实现图片裁剪的功能，因前段时间比较忙，今天抽空实现了这个功能，在这里分享给大家使用，已将功能封装为自定义组件，大家可自取。具体逻辑都在代码里加上了注释，有想了解的可以看源码去理解，有问题在评论区留言即可。欢迎反馈bug～
源码地址：https://gitee.com/minchangyong/alipay-serverless/tree/master/client/components/copper
效果视频：
上手指南：
首先引入封装好的裁剪组件
然后页面上注入组件实例：
HTML
<!--图片展示 --> <image style='width:100%' mode="widthFix" src='{{headImg}}' a:if="{{headImg}}" /> <button onTap='handleChooseImg'>选择图片</button> <my-cropper src="{{imageSrc}}" onSuccess="handleSuccess" /> 接着JS里处理裁切后的返回图：
JavaScript
Page({ data: { imageSrc: '' }, // 选择图片，将返回的本地图片地址传入裁剪组件内 handleChooseImg() { my.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: (res) => { // 返回选定照片的本地文件路径列表 this.setData({ imageSrc: res.apFilePaths[0] }) } }) }, // 裁剪成功回调 handleSuccess(e) { this.setData({ headImg: e.path }) }, // 裁剪失败回调 handleError(e) { console.log(e) } })
入参
属性 |
类型 |
描述 |
src |
String |
本地图片地址 |
回调函数
属性 |
类型 |
描述 |
onSuccess |
Function |
裁剪图片成功的回调方法，内含path字段为裁剪后的图片地址 |
|
Function |
裁剪图片失败的回调方法，可通过errMsg查看失败原因 |
