uni-app小程序使用canvas绘制图片、在图片上涂鸦、撤销上一步、保存图片到相册

image.png

需求

• 在canvas插入图片当做背景图
• 在图片上进行涂鸦、图画
• 可以更换画笔粗细、颜色
• 可以实现撤销上一步操作
• 最后可以同图片一起保存至本地相册或者上传至服务器

功能注意点

• 使用uni.getSystemInfo({})获取设备的宽高作为canvas区域及绘图区域
• 绘图时，不可以直接使用网络图片，使用wx.getImageInfo({})获取图片信息做为绘图路径

撤销操作逻辑

• 绘图步骤start->move->end
• 在每次start的时候调用保存图片的方法，将当前画布的图片保存在本地的数组中
• 点击撤销的时候，删除保存数组中的最后一个图片地址，并重画这个地址的图片（drawImage）

以下为全部代码

HTML

JS

CSS