小程序canvas生成海报

小程序中的使用canvas生成海报

1.canvas.wxml

// 画布
<canvas style="width: 400px; height: 500px;" canvas-id="shareCanvas"></canvas>
//默认宽300px,高150px；同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作

2.canvas.js

// 通过两个函数的封装，完成整个海报的绘制过程 。

  //获取canvas宽高，主要是解决canvas的适配问题。
  creatCanvas() {
    var that = this;
    // 获取宽高
    wx.createSelectorQuery().selectAll('.canvas').boundingClientRect(function(rect) {
      var canvasw = rect[0].width;
      var canvash = rect[0].height;
      // 绘制canvas
      that.draw(canvasw, canvash)
    }).exec()
  },

  //绘制
  draw(canvasw, canvash) {
    var that = this;
    // 使用 wx.createContext 获取绘图上下文 context，参数是canvas组件中的canvas-id属性的值。
    const ctx = wx.createCanvasContext('shareCanvas');
    //二维码
    var code = that.data.codeImg;
    //背景图
    var bj = that.data.imgHost +'/images/wxs/images/limited/golden_eggs/canvasbj.png';
    /**
      注意点：
      1.canvas中绘制图片：
      (1)本地资源;
      (2)线上资源:线上资源的域名必须为https;需要在公众平台上配置downloadFile合法域名;需要使用wx.getImageInfo/ wx.downloadFile得到线上图片的临时路径;
    */
    wx.getImageInfo({
      src: bj,  //背景
      success(bj){
        wx.getImageInfo({
          src: that.data.avatarUrl,  //微信头像
          success(res) {
            wx.getImageInfo({
              src: code,  //二维码
              success(res1) {
                //绘制背景和二维码
                ctx.drawImage(bj.path, 0, 0, canvasw, canvash);
                ctx.drawImage(res1.path, canvasw - 70, canvash - 70, 50, 50);
                
                ctx.beginPath();
                ctx.setFillStyle('white'); //设置填充色
                ctx.setFontSize(15); //字体大小
                ctx.setTextAlign('center') ; //文字对齐
                ctx.fillText(that.data.nickName, canvasw / 2, 96); //绘制文本
                ctx.setTextAlign('left');
                ctx.setFontSize(14);
                ctx.fillText('长按识别小程序码', 20, canvash - 45);
                ctx.fillText('帮好友开启神秘礼盒', 20, canvash - 25);
                ctx.setFillStyle('#FFD522');
                ctx.setTextAlign('center')
                ctx.setFontSize(16);
                ctx.fillText('的神秘礼盒', canvasw / 2, 115);
                ctx.setFillStyle('white');
                ctx.fillText('还有', canvasw / 2 - 90, 146);
                ctx.fillText('消失', canvasw / 2 + 80, 146);

                ctx.setFillStyle('white')
                ctx.fillRect(canvasw / 2 - 70, 128, 25, 25);
                ctx.fillRect(canvasw / 2 - 35, 128, 25, 25);
                ctx.fillRect(canvasw / 2, 128, 25, 25);
                ctx.setFillStyle('red');
                ctx.fillRect(canvasw / 2 + 35, 128, 25, 25);

                ctx.setFillStyle('black')
                ctx.fillText(':', canvasw / 2 - 40, 146);
                ctx.fillText(':', canvasw / 2 - 5, 146);
                ctx.fillText(':', canvasw / 2 + 30, 146);
              
                ctx.setFontSize(13);
                ctx.fillText(that.data.h, canvasw / 2 - 58, 146);
                ctx.fillText(that.data.m, canvasw / 2 - 22, 146);
                ctx.fillText(that.data.s, canvasw / 2 + 13, 146);
                ctx.setFillStyle('white')
                ctx.fillText(28, canvasw / 2 + 48, 146);
                //绘制圆形头像
                ctx.setFillStyle('white');
                ctx.setLineWidth(1)
                ctx.arc(canvasw / 2, 50, 25, 0, 2 * Math.PI);
                ctx.clip();
                ctx.fill();
                ctx.drawImage(res.path, canvasw / 2 - 25, 25, 50, 50);
       
                //进行绘制
                ctx.draw(false, setTimeout(() => {
                //把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。
                  wx.canvasToTempFilePath({
                    canvasId: 'shareCanvas',
                    success: function (res) {
                      console.log(res);
                      if (res.tempFilePath) {
                        that.setData({
                          poster: res.tempFilePath,  //生成海报图片的临时路径
                        })
                      }
                    },
                    fail: function (res) {
                      wx.showToast({
                        title: '生成失败',
                        icon: "none"
                      })
                    }
                  })
                }, 500))
              }
            })
          }
        })
      }
    }) 
  },