【微信小程序采坑】wx.canvasToTempFilePath生成图片第一次为全透明（白色）的问题？

原创于 2018-04-25 20:50:47 发布 · 1.2w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #canvas

微信小程序专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在Canvas中绘制完成后使用异步方法保存图片的技术。通过setTimeout将保存操作延迟执行，确保绘制过程完全结束后再进行图片导出，避免了因绘制未完成而导致的图片质量问题。

只需要在canvas画完图片之后吧保存图片这个函数用异步来实现即可。

比如：

  ...
  ...
  context.draw();
  setTimeout(() => {
        this.drawAfter();
      }, 200);

  drawAfter: function ()  {
    wx.canvasToTempFilePath({
      width: 170,
      heght: 170,
      canvasId: 'myCanvas',
      fileType: 'jpg',
      quality: 1,
      success: (res) => {
        console.log(1);
      },
      fail: function (res) {
        console.log(res);
      },
    })