微信小程序Canvas绘图存图

使用 canvas 画图,并保存至相册的过程,以下是踩过的坑:

  1. canvas 标签不可以设置为 display: none;若不想显示到页面,可以采用 fixed 布局视觉隐藏;
  2. context.draw(boolean reserve, function callback) 是异步的,wx.canvasToTempFilePath一定要写在回调里,否则会出现无法绘图的情况;
  3. wx.canvasToTempFilePath 保存图片至相册,需要用户授权,所以保存前需要检查权限。一旦用户一次拒绝授权,第二次保存时是不会有授权弹窗的,可以使用 wx.openSetting 去引导用户授权。(插一句:支付宝小程序,只要没权限,每次调用都会弹出授权弹窗)

代码片段:一个简单的canvas demo

再放个采坑过程:关于 HTML → Canvas → Image → 保存相册 的过程。点我跳转。(不是我写的,但过程跟我相同,懒得写了)

效果图

你可能感兴趣的:(微信小程序Canvas绘图存图)