最近需要一个功能,在微信中编辑图片,实现对图片的涂鸦、加文字、缩放、移动,以下基本能实现该功能。
uniapp中使用画布,实现图片的编辑-批量批改图片
1.初始化画布图片,图片是网络图片,非本地图片,所以需要先获取图片信息,直接使用uni.getImageInfo(如果是本地图片不需要这步)
2.涂鸦线条可以设置粗细、颜色,this.ctx.draw(true),需要true保留,否则会清空画布
3.双指实现缩放,根据双指的距离长短,判断缩放,缩放速度可能比较快,还需要加能控制缩放速度的
4.画布上加文字
这里画布的优先级比较高,层级不起作用,输入框在真机上查看时缺少边框,能够绘制文字
5.将涂鸦和文字绘制到图片后,生成新的图片
6.编辑图片后的效果图
7.清空恢复初始化图片
注①:每次涂鸦或者加文字后,会重新生成新的图片,新的图片作为底图,继续进行编辑--该方式会导致图片有些模糊