微信小程序 canvas绘制Base64数据图片

微信小程序canvas不支持直接绘制base64格式图片,按以下步骤可以绘制:
1、用wx.getFileSystemManager().writeFile方法,把base64格式图片转为binary格式图片,写入本地;
2、canvas绘制binary格式图片;
3、绘制完毕,用wx.getFileSystemManager().unlink方法,删除binary格式图片;

代码如下:

draw: function(obj) {
   let promise = new Promise((resolve, reject) => { 
      let filePath = `${wx.env.USER_DATA_PATH}/${obj.id}`; 
      wx.getFileSystemManager().writeFile({
        filePath: filePath,
        data: wx.base64ToArrayBuffer(this.getBase64Data(obj.url)),
        encoding: 'binary',
        success: () => { 
          console.log('写入成功, 路径: ', filePath);
          resolve(filePath); 
        },
        fail: err => {
          reject('写入失败:', err);
        },
      });
    })
    return new Promise((resolve, reject) => {
      promise.then(filePath => {
        var ctx = wx.createCanvasContext('canvas');
        ctx.drawImage(filePath, 0, 0, 300, 300);
        ctx.draw(false, () => {
          wx.canvasToTempFilePath({
            canvasId: 'canvas',
            success: res => {
              let saveFilePath = res.tempFilePath;
              /// 删除写入的数据
              wx.getFileSystemManager().unlink({
                filePath: filePath,
                success: res => {
                  console.log('删除成功, 路径: ', filePath);
                  resolve(saveFilePath);
                },
                fail: err => {
                  reject('删除失败:', err);
                }
              })
            },
            fail: err => {
              reject('保存图片到本地失败:', err);
            }
          })
        })
      }, err => {
        reject(err);
      })
   }) 
}

具体demo:https://developers.weixin.qq.com/s/mz2yComp7Id4

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,816评论 1 45
  • 一、快捷键 ctr+b 执行ctr+/ 单行注释ctr+c ...
    o_8319阅读 5,880评论 2 16
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,150评论 1 32
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,598评论 0 17
  • 第一期:带你走进【RR.Ex】 公司介绍: RR.Ex国际投资集团成立于开曼群岛,是一家以资...
    蛋蛋的忧桑www阅读 285评论 0 0