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

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

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

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

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

4.画布上加文字

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

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

6.编辑图片后的效果图

7.清空恢复初始化图片

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

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐