微信小程序Canvas画海报（基于2.9.0新的Canvas2D接口）

使用新的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};

完。