最近需要一个功能,在微信中编辑图片,实现对图片的涂鸦、加文字、缩放、移动,以下基本能实现该功能。
uniapp中使用画布,实现图片的编辑-批量批改图片
1.初始化画布图片,图片是网络图片,非本地图片,所以需要先获取图片信息,直接使用uni.getImageInfo(如果是本地图片不需要这步)
2.涂鸦线条可以设置粗细、颜色,this.ctx.draw(true),需要true保留,否则会清空画布
3.双指实现缩放,根据双指的距离长短,判断缩放,缩放速度可能比较快,还需要加能控制缩放速度的
4.画布上加文字
这里画布的优先级比较高,层级不起作用,输入框在真机上查看时缺少边框,能够绘制文字
5.将涂鸦和文字绘制到图片后,生成新的图片
6.编辑图片后的效果图
7.清空恢复初始化图片
文章来源:https://www.toymoban.com/news/detail-850798.html
注①:每次涂鸦或者加文字后,会重新生成新的图片,新的图片作为底图,继续进行编辑--该方式会导致图片有些模糊文章来源地址https://www.toymoban.com/news/detail-850798.html
到了这里,关于uniapp中使用canvas,在微信小程序中实现图片缩放移动涂鸦文字的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!