uniapp中使用canvas,在微信小程序中实现图片缩放移动涂鸦文字

最近需要一个功能,在微信中编辑图片,实现对图片的涂鸦、加文字、缩放、移动,以下基本能实现该功能。

uniapp中使用画布,实现图片的编辑-批量批改图片

1.初始化画布图片,图片是网络图片,非本地图片,所以需要先获取图片信息,直接使用uni.getImageInfo(如果是本地图片不需要这步)

2.涂鸦线条可以设置粗细、颜色,this.ctx.draw(true),需要true保留,否则会清空画布

3.双指实现缩放,根据双指的距离长短,判断缩放,缩放速度可能比较快,还需要加能控制缩放速度的

4.画布上加文字

这里画布的优先级比较高,层级不起作用,输入框在真机上查看时缺少边框,能够绘制文字

5.将涂鸦和文字绘制到图片后,生成新的图片

6.编辑图片后的效果图

7.清空恢复初始化图片

注①:每次涂鸦或者加文字后,会重新生成新的图片,新的图片作为底图,继续进行编辑--该方式会导致图片有些模糊

  • 11
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值