微信小程序canvas畫海報總結-2

發表時間：2021-1-8

發布人：葵宇科技

浏覽次數：24

坑爹的微信,使用canvas 2D的方式, 必須用createImage這個(gè)API,偏偏這個(gè)API挂了,所以下(xià)面使用另一種方式實現海報.

主要由微信推薦的canvas 2D方式更換為微信即将遺棄的老canvas實現方式,因此能夠避免使用createImage這個(gè)API.其他的實現方式和(hé)思路(lù)是和(hé)微信小程序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這個(gè)挂掉的API

主要用wx.getImageInfo獲取到圖片文(wén)件的臨時本地路(lù)徑,便于調用ctx.drawImage畫圖片

wx.getImageInfo({
        src: imgUrl,
        success (res) {
          resolve(res);
        },
        fail(e) {
          business.toast.show('海報圖片加載失敗,請稍後重試~', 'none');
          reject(e);
        }
      })
複制代碼

3.ctx.draw回調函數

要下(xià)載canvas畫出來的圖片,就必須在ctx.draw的回調函數内調用wx.canvasToTempFilePath,最終完成下(xià)載

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: this.computedWAndD(canvasStyle.width),
        height: this.computedWAndD(canvasStyle.height),
        destWidth: canvasStyle.width*3,
        destHeight: canvasStyle.height*3,
        canvasId: canvasId,
        fileType: 'png',
        success(res) {
          resolve(res.tempFilePath);
        },
        fail(error) {
          reject(error);
        }
      })
    });
  },
複制代碼