微信小程序canvas画海报总结-2

标签:程序,海报,总结 发布时间:2021年02月28日 点击23

坑爹的微信,使用canvas 2D的体例, 必须用createImage这个API,偏偏这个API挂了,所以下面使用另一种体例实现海报.

重要由微信保举的canvas 2D体例替换为微信即将遗弃的老canvas实现体例,因此能够避免使用createImage这个API.其他的实现体例和思路是和微信小程序canvas画海报总结-1一样的.


不同之处
1. canvas声明体例不同

wxml, 不再声明type=2d, id属性

<canvas canvas-id="c3" class="canvas1" style="width: {{canvasStyle.width}}rpx; height: {{canvasStyle.height}}rpx;"></canvas>
复制代码

js, 获取context对象

const ctx = wx.createCanvasContext(canvasId);
复制代码

2. 加载图片,避开createImage这个挂掉的API

重要用wx.getImageInfo获取到图片文件的一时本地路径,便于调用ctx.drawImage画图片

wx.getImageInfo({
        src: imgUrl,
        success (res) {
          resolve(res);
        },
        fail(e) {
          business.toast.show('海报图片加载失败,请稍后重试~', 'none');
          reject(e);
        }
      })
复制代码

3.ctx.draw回调函数

要下载canvas画出来的图片,就必须在ctx.draw的回调函数内调用wx.canvasToTempFilePath,最终完成下载

ctx.draw(false, async () => {
      try {
        const tempPath = await haibaoUtil.createHaibaoUrl(canvasId, this.data.canvasStyle);
        this.save(tempPath);
      } catch(e) {
        console.error(e);
        logger.error('保存海报图片失败, 请稍后重试~',e);
      }
    });
createHaibaoUrl(canvasId, canvasStyle) { return new Promise((resolve, reject) => { wx.canvasToTempFilePath({ x: 0, y: 0, width: this3564putedWAndD(canvasStyle.width), height: this3564putedWAndD(canvasStyle.height), destWidth: canvasStyle.width*3, destHeight: canvasStyle.height*3, canvasId: canvasId, fileType: 'png', success(res) { resolve(res.tempFilePath); }, fail(error) { reject(error); } }) }); }, 复制代码

手机网站建设