【经验分享】如何实现在支付宝小程序内的图片裁剪功能

简介: 【经验分享】如何实现在支付宝小程序内的图片裁剪功能

前言:
挺久之前就收到过支付宝社区同学的提问,支付宝小程序内如何实现图片裁剪的功能,因前段时间比较忙,今天抽空实现了这个功能,在这里分享给大家使用,已将功能封装为自定义组件,大家可自取。具体逻辑都在代码里加上了注释,有想了解的可以看源码去理解,有问题在评论区留言即可。欢迎反馈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查看失败原因



目录
相关文章
|
14天前
|
小程序
微信小程序如何实现进入小程序自动连WiFi功能
微信小程序如何实现进入小程序自动连WiFi功能
|
1月前
|
小程序 Devops 开发工具
支付宝小程序入门学习之一:如何创建支付宝小程序并在手机上预览
支付宝小程序入门学习之一:如何创建支付宝小程序并在手机上预览
30 0
|
1月前
|
小程序 API
点餐小程序实战教程09-订单功能开发
点餐小程序实战教程09-订单功能开发
|
1月前
|
小程序 开发工具 数据库
零基础开发小程序第三课-列表功能开发
零基础开发小程序第三课-列表功能开发
|
2月前
|
小程序 JavaScript
微信小程序图片预览功能?
微信小程序图片预览功能?
|
1月前
|
存储 小程序 开发工具
零基础开发小程序第四课-查看功能开发
零基础开发小程序第四课-查看功能开发
|
1月前
|
小程序 算法 数据可视化
点餐小程序实战教程07-点餐功能开发
点餐小程序实战教程07-点餐功能开发
|
1月前
|
小程序
TDesign电商小程序模板解析02-首页功能
TDesign电商小程序模板解析02-首页功能
|
2月前
|
JSON 小程序 安全
【经验分享】如何实现小程序日历范围选择功能
【经验分享】如何实现小程序日历范围选择功能
140 2
|
2月前
|
移动开发 小程序 API
【每周一个小技巧】支付宝小程序内如何跳转生活号文章
【每周一个小技巧】支付宝小程序内如何跳转生活号文章
88 1

热门文章

最新文章