欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

微信小程序canvas畫海報總結(jié)-2 - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價值，我們在追求其視覺表現(xiàn)的同時，更側(cè)重于功能的便捷，營銷的便利，運營的高效，讓網(wǎng)站成為營銷工具，讓軟件能切實提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序為后期升級提供便捷的支持！

您當(dāng)前位置>首頁 » 新聞資訊 » 小程序相關(guān) >

微信小程序canvas畫海報總結(jié)-2

發(fā)表時間：2021-1-8

發(fā)布人：葵宇科技

瀏覽次數(shù)：31

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

主要由微信推薦的canvas 2D方式更換為微信即將遺棄的老canvas實現(xiàn)方式,因此能夠避免使用createImage這個API.其他的實現(xiàn)方式和思路是和微信小程序canvas畫海報總結(jié)-1一樣的.

不同之處

1. canvas聲明方式不同

wxml, 不再聲明type=2d, id屬性

<canvas canvas-id="c3" class="canvas1" style="width: {{canvasStyle.width}}rpx; height: {{canvasStyle.height}}rpx;"></canvas>
復(fù)制代碼

js, 獲取context對象

const ctx = wx.createCanvasContext(canvasId);
復(fù)制代碼

2. 加載圖片,避開createImage這個掛掉的API

主要用wx.getImageInfo獲取到圖片文件的臨時本地路徑,便于調(diào)用ctx.drawImage畫圖片

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

3.ctx.draw回調(diào)函數(shù)

要下載canvas畫出來的圖片,就必須在ctx.draw的回調(diào)函數(shù)內(nèi)調(diào)用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: 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);
        }
      })
    });
  },
復(fù)制代碼