技術標籤：技術小白微信小程式微信小程式canvascanvas海報繪製圖片報錯

使用新的Canvas2D介面，生成海報並儲存

在使用新的介面的時候，文件和社群對於一些報錯和不懂的地方都是隻言片語，所以，整理實操之後釋出一篇文章記錄一下

使用文件上面的例子可以直接畫個長方形，沒有什麼好說的

注意： 在使用新的介面的時候畫完一個圖形，不使用draw()結束繪製

使用新的介面在生成海報的時候，比較麻煩的是 繪製圖片和儲存canvas到本地

繪製圖片

//繪製海報
wx.getImageInfo({
	src: '', // 圖片路徑
	success: res => {
		let imageUrl =
 
 res.path // 圖片臨時地址
        let imageW = res.width
        let imageH = res.height
        let ratio = imageW/canvas.width  // 獲取比例
        // 1. 建立一個圖片物件。支援在 2D Canvas 和 WebGL Canvas 下使用, 但不支援混用 2D 和 WebGL 的方法。
        let imageObj = canvas.createImage()
        // 2. 給建立的圖片物件的src賦值
        imageObj.src = imageUrl
        // 3. 圖片載入完之後觸發
 

        imageObj.onload = () => {
        	// 4. 繪製圖片
			ctx.drawImage(imageObj, 0, 0, imageW/ratio, imageH/ratio);
		}
	}
})

報錯

繪製圖片出現此報錯，大概率是沒使用 canvas.createImage() 建立圖片物件

儲存canvas到本地

// 儲存canvas
// canvas 是canvas元件例項---這裡的例項是一開始在js裡面獲取的canvas 文件上面的 const canvas = res[0].node
wx.canvasToTempFilePath
 
({
	canvas: canvas,
	fileType: 'jpg',
	success: res => {}
})

注意點，canvas引數為上面的 const canvas = res[0].node

下面的是我自己的

// poster.js

/**
 * 海報繪製
 * @param {String} circleBg 背景圖/海報
 * @param {String} qrCodeUrl 二維碼
 */
const drawPoster = function(circleBg, qrCodeUrl){
  let posterCanvas = wx.createSelectorQuery().select('#posterCanvas')
  return new Promise((resolve, reject) => {
    posterCanvas.fields({node: true, size: true}).exec(res => {
      const canvas = res[0].node
      const ctx = canvas.getContext('2d')
      const dpr = wx.getSystemInfoSync().pixelRatio
      canvas.width = res[0].width * dpr
      canvas.height = res[0].height * dpr

      // 繪製海報
      wx.getImageInfo({
        src: circleBg,
        success: res => {
          let imageUrl = res.path // 圖片臨時地址
          let imageW = res.width
          let imageH = res.height
          let ratio = imageW/canvas.width  // 獲取比例
          let imageObj = canvas.createImage()
          imageObj.src = imageUrl
          imageObj.onload = (res) => {
            ctx.drawImage(imageObj, 0, 0, imageW/ratio, imageH/ratio);
            // 繪製二維碼
            wx.getImageInfo({
              src: qrCodeUrl,
              success: res => {
                let qrImageUrl = res.path
                let qrImageW = 130 // 二維碼大小（正方形）
                let qrRatio = ratio
                let qrImageObj = canvas.createImage()
                qrImageObj.src = qrImageUrl
                qrImageObj.onload = (res) => {
                  //            圖片        left    top                                width            height
                  ctx.drawImage(qrImageObj, 5, canvas.height-(qrImageW+2)/qrRatio, qrImageW/qrRatio, qrImageW/qrRatio)
                  // canvas轉圖片臨時路徑
                  wx.canvasToTempFilePath({
                    canvas: canvas,
                    fileType: 'jpg',
                    success: res => {
                      resolve(res)
                    },
                    fail: err => {
                      reject(err)
                    }
                  })
                }
              },
              fail: err => {
                reject(err)
              },
            })
          }
        },
        fail: err => {
          reject(err)
        },
      })
    })
  })
}

export default {drawPoster};

完。