微信小程序---图片裁剪、旋转、预览、上传功能实现(已经封装成组件,需要的到资源下载)

一、实现效果

 二、实现功能

1、可以拍摄或选择本地图片上传图片数据

2、图片上传数据可以进行裁剪、选择、取消、裁剪后预览、上传以及限制大小,还可以缩放操作,需要的可以解除限制即可

三、实现思路

1、点击图片上传按钮时,跳转页面到cropper进行图片选择剪切

wx.navigateTo({

      url: `/pages/cropper/cropper?disable_width=true&disable_height=true`

    });

 2、/pages/cropper/cropper页面会直接弹出选择拍照还是本地图片上传,当取消后会返回到上一层

3、页面会进行图片编辑操作,操作好后,通过上传按钮,将本地图片路径先存储到公共app.globalData里面,然后跳转到上一层(主页面)。

4、主页面onshow检索到app.globalData页面路径是否不为空,不为空后将调用上传方法,将路径传递给服务器(不懂的可以查找我主页上传图片的文章)

5、上传成功后,将app.globalData页面的参数清空即可。

6、实现操作简单,方便快捷为用户手机操作图片,进行图片的统一展示。

四、提示

需要的用户可以自用下载资源实践,不懂的可以联系我哦,一起商量探讨

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

下代码雨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值