博客

微信小程序生成海报功能实际使用canvas进行绘制和生成图片

实际工作使用canvas遇到了几个问题：

1. 获取canvas节点宽高为空
   场景：canvas节点进入页面是先被隐藏且未被渲染的，点击“生成海报”按钮后在进行渲染并开始获取canvas节点，结果获取canvas节点宽高为空
   解决：使用倒计时延迟200ms进行获取
2. 在canvas中绘制base64格式图片
   解决：方案在如下代码中
3. wx.canvasToTempFilePath生成图片报错"canvasToTempFilePath: fail canvas is empty"
   解决：canvas type=“2d” 时使用”canvas”属性并传入canvas实例，之前使用“canvasId”属性一直报错，以为是传入canvas中HTML的id属性值

wxml

<canvas type="2d" id="myCanvas"></canvas>

js

var myCanvas = null;
Page({
	onLoad() {
		// 通过 SelectorQuery 获取 Canvas 节点
		wx.createSelectorQuery()
		.select('#myCanvas')
		.fields({
		  node: true,
		  size: true,
		})
		.exec(this.drawPoster.bind(this))
	}
	// 开始绘制海报
	drawPoster(res) {
		const width = res[0].width
	    const height = res[0].height
	    const canvas = res[0].node
	    const ctx = canvas.getContext('2d')
	    const dpr = wx.getSystemInfoSync().pixelRatio
	    canvas.width = width * dpr
	    canvas.height = height * dpr
	    ctx.scale(dpr, dpr)
		
		// 填充白色背景
	    ctx.fillStyle = '#ffffff'
	    ctx.fillRect(0,0,canvas.width,canvas.height);
		
		// 绘制商品图片
	    const img = canvas.createImage()
	    img.src = this.data.data.cover
	    img.onload = () => {
	      ctx.drawImage(img, 20, 20, 260, 260)
	    }
		// 绘制文本
		ctx.fillStyle = "#000";
	    ctx.font = "14px PingFangSC-Medium"
	    ctx.fillText('我是一段文本', 20, 100)
	    // 绘制换行文本
	    drawTextOn(ctx,'我也是一段文本',20,110,150)
	    // 绘制二维码(后端返回base64格式二维码)
	    let data = this.data.minCode.split(',')[1]  //去除返回中的"data:image/jpg;base64"
	    // 将base64格式图片转换为本地图片
	    wx.getFileSystemManager().writeFile({
	       filePath: wx.env.USER_DATA_PATH + "/qrCode.png",
	       data,
	       encoding: 'base64',
	       success: (res) => {
	          let qrCode = canvas.createImage()
	          qrCode.src = wx.env.USER_DATA_PATH + "/qrCode.png"
	          qrCode.onload = () => {
	            ctx.drawImage(qrCode, 200, 300, 75, 75)
	          }
	       },
	       fail:(err) => {
	         console.log('err' + err);
	       }
	     })
	    myCanvas = canvas // 保存canvas实例
	},
	// 保存海报
	savaImg() {
    wx.canvasToTempFilePath({  // 将canvas生成图片
      canvas: myCanvas,
      success: (res) => {
        wx.saveImageToPhotosAlbum({  //保存图片到相册
          filePath: res.tempFilePath,
          success: function (res) {
            wx.showToast({
              icon:'none',
              title: "保存图片成功"
            })
          },
          fail:(err) => {
           console.log(err);
          }
        })
      },
      fail:(err) => {
        console.log(err);
      }
    })
  },
  // canvas填充文字自动换行
  drawTextOn(ctx,t,x,y,w){
	  var chr = t.split("");
	  var temp = "";              
	  var row = [];
	
	  ctx.font = "14px PingFangSC-Medium";
	  ctx.fillStyle = "#000";
	
	  for(var a = 0; a < chr.length; a++){
	      if( ctx.measureText(temp).width < w ){
	          ;
	      }
	      else{
	          row.push(temp);
	          temp = "";
	      }
	      temp += chr[a];
	  }
	  row.push(temp);
	  for(var b = 0; b < row.length; b++){
	      ctx.fillText(row[b],x,y+(b+1)*20);
	  }
  },
})