小程序 canvas 2d 新接口 绘制带小程序码的海报图

Posted 2021-03-03 Alpiny’ Blog

更新，截止2020.4.17日，canvas 2d接口在pc端微信不支持，官方有人在2月份说后续会支持，遥遥无期。

--------------------------------

截止2020.3.26，小程序官方文档中，有两种绘制方式：Canvas 2D、webGL

文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

而开发者工具中，官方推荐使用性能更好的2d模式，用法如下所示：

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

但是网上大多数教程都是使用旧的接口，如：

<canvas canvas-id="canvasBox"></canvas>

本着学习和为后来人踩坑的目的，我们来尝试一下新接口，迎接未知的挑战 ：）

需要注意的是：官方文档中CanvasContext的一些函数，在Canvas 2d模式下已经失效，这点，官方用了一句话做了描述：

canvas 组件的绘图上下文。CanvasContext 是旧版的接口， 新版 Canvas 2D 接口与 Web 一致。

出处：https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.html

举个例子，比如设置填充色：

// 旧方式：
ctx.setFillStyle(\'red\') // 在Canvas 2d 下会报错

// 新方式：
ctx.fillStyle = "red"; 

 所以针对新接口的方法，可以参考html5的canvas api。

最终效果

 

 

 

下面就让我们抽丝剥茧，细细剖析。

以下代码均在官方开发者工具下编写

---

步骤：

wxml文件中，加入canvas标签以及保存按钮：

<view style="width:100%;height:{{canvasHeight}}px;">
    <canvas type="2d" id="canvasBox" style="width:100%;height:100%;"></canvas>
</view>

 

 js文件中：

1.设置数据：数据就相当于所有交通的枢纽

data: {

    // 数据区，从服务端拿到的数据
    name: "作者 Alpiny",    // 姓名
    phone: "13988887777",  // 电话
    posterUrl: "https://desk-fd.zol-img.com.cn/t_s1024x1024c5/g5/M00/00/0A/ChMkJlmfw7CIBpnCAAD3xQrT42EAAf9sgAH1ycAAPfd598.jpg", // 海报地址
    photoUrl:  "https://img2.woyaogexing.com/2020/03/27/3698eb92b78246e99d859f97f4227936!400x400.jpeg",                         // 头像地址
    qrcodeUrl: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=144549786,228270254&fm=26&gp=0.jpg",                  // 小程序二维码

    // 设置区，针对部件的数据设置
    photoDiam: 50,                // 头像直径
    qrcodeDiam: 80,               // 小程序码直径
    infoSpace: 13,                // 底部信息的间距
    saveImageWidth: 500,          // 保存的图像宽度
    bottomInfoHeight: 100,        // 底部信息区高度
    tips: "微信扫码或长按了解更多",   // 提示语

    // 缓冲区，无需手动设定
    canvasWidth: 0,               // 画布宽
    canvasHeight: 0,              // 画布高
    canvasDom: null,              // 画布dom对象
    canvas:null,                  // 画布的节点
    ctx: null,                    // 画布的上下文
    dpr: 1,                       // 设备的像素比
    posterHeight: 0,              // 海报高
  },

这里数据分了三类：数据区是后端传送来的数据、设置区是可以定制画面的数据、缓冲区是用来暂存一些临时的数据，无需设置。

 

2.onReady 钩子中，执行 drawImage 函数

onReady: function () {
    this.drawImage()
  },

放到 onReady里的目的，是为了一进入页面就直接渲染画面。

 

3.创建drawImage函数，用来选择canvas节点并准备绘图：

// 查询节点信息，并准备绘制图像
  drawImage() {
    const query = wx.createSelectorQuery()  // 创建一个dom元素节点查询器
    query.select(\'#canvasBox\')              // 选择我们的canvas节点
      .fields({                             // 需要获取的节点相关信息
        node: true,                         // 是否返回节点对应的 Node 实例
        size: true                          // 是否返回节点尺寸（width height）
      }).exec((res) => {                    // 执行针对这个节点的所有请求，exec((res) => {alpiny})  这里是一个回调函数
        
        const dom = res[0]                            // 因为页面只存在一个画布，所以我们要的dom数据就是 res数组的第一个元素
        const canvas = dom.node                       // canvas就是我们要操作的画布节点
        const ctx = canvas.getContext(\'2d\')           // 以2d模式，获取一个画布节点的上下文对象
        const dpr = wx.getSystemInfoSync().pixelRatio // 获取设备的像素比，未来整体画布根据像素比扩大
        this.setData({
          canvasDom: dom,   // 把canvas的dom对象放到全局
          canvas: canvas,   // 把canvas的节点放到全局
          ctx: ctx,         // 把canvas 2d的上下文放到全局
          dpr: dpr          // 屏幕像素比
        },function(){
          this.drawing()    // 开始绘图
        })
      })     
      // 对以上设置不明白的朋友
      // 可以参考 createSelectorQuery 的api地址
      // https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html
  },

看，上面的代码第20行执行了drawing函数，drawimg 函数里制定了绘制的整体流程，下面我们来创建它。

 

4.创建 drawimg 函数

// 绘制画面 
  drawing() {
    const that = this;
    wx.showLoading({title:"生成中"}) // 显示loading
    that.drawPoster()               // 绘制海报
      .then(function () {           // 这里用同步阻塞一下，因为需要先拿到海报的高度计算整体画布的高度
        that.drawInfoBg()           // 绘制底部白色背景
        that.drawPhoto()            // 绘制头像
        that.drawQrcode()           // 绘制小程序码
        that.drawText()             // 绘制文字
        wx.hideLoading()            // 隐藏loading
      })
  },

这其中要注意的是，为了让最终生成的图片自适应高，所以要提前拿到海报的高度来设置画布，所以，第一步绘制海报是阻塞运行的(采用了Promise来完成阻塞)。

 

5.创建 drawPoster 函数，绘制海报

// 绘制海报
  drawPoster() {
    const that = this
    return new Promise(function (resolve, reject) {
      let poster = that.data.canvas.createImage();          // 创建一个图片对象
      poster.src = that.data.posterUrl                      // 图片对象地址赋值
      poster.onload = () => {
        that.computeCanvasSize(poster.width, poster.height) // 计算画布尺寸
          .then(function (res) {
            that.data.ctx.drawImage(poster, 0, 0, poster.width, poster.height, 0, 0, res.width, res.height);
            resolve()
          })
      }
    })
  },

而drawPoster大约第7行，又进行了阻塞，是因为，我们要用拿到的海报数据先设置一下画布，否则直接绘图会导致失败。

 

6.创建 computeCanvasSize 函数，用来计算画布尺寸

// 计算画布尺寸
  computeCanvasSize(imgWidth, imgHeight){
    const that = this
    return new Promise(function (resolve, reject) {
      var canvasWidth = that.data.canvasDom.width                   // 获取画布宽度
      var posterHeight = canvasWidth * (imgHeight / imgWidth)       // 计算海报高度
      var canvasHeight = posterHeight + that.data.bottomInfoHeight  // 计算画布高度 海报高度+底部高度
      that.setData({
        canvasWidth: canvasWidth,                                   // 设置画布容器宽
        canvasHeight: canvasHeight,                                 // 设置画布容器高
        posterHeight: posterHeight                                  // 设置海报高
      }, () => { // 设置成功后再返回
        that.data.canvas.width = that.data.canvasWidth * that.data.dpr // 设置画布宽
        that.data.canvas.height = canvasHeight * that.data.dpr         // 设置画布高
        that.data.ctx.scale(that.data.dpr, that.data.dpr)              // 根据像素比放大
        setTimeout(function(){
          resolve({ "width": canvasWidth, "height": posterHeight })    // 返回成功
        },1200)
      })
    })
  },

 

7.创建第4步所需的其他几个函数：drawInfoBg(绘制底部白色背景)、drawPhoto(绘制头像)、drawQrcode(绘制二维码)、drawText(绘制文本)、alpiny(作者本人)

  // 绘制白色背景
  // 注意：这里使用save 和 restore 来模拟图层的概念，防止污染
  drawInfoBg() {
    this.data.ctx.save();
    this.data.ctx.fillStyle = "#ffffff";                                         // 设置画布背景色
    this.data.ctx.fillRect(0, this.data.canvasHeight - this.data.bottomInfoHeight, this.data.canvasWidth, this.data.bottomInfoHeight); // 填充整个画布
    this.data.ctx.restore();
  },

  // 绘制头像
  drawPhoto() {
    let photoDiam = this.data.photoDiam               // 头像路径
    let photo = this.data.canvas.createImage();       // 创建一个图片对象
    photo.src = this.data.photoUrl                    // 图片对象地址赋值
    photo.onload = () => {
      let radius = photoDiam / 2                      // 圆形头像的半径
      let x = this.data.infoSpace                     // 左上角相对X轴的距离
      let y = this.data.canvasHeight - photoDiam - 35 // 左上角相对Y轴的距离 ：整体高度 - 头像直径 - 微调
      this.data.ctx.save()
      this.data.ctx.arc(x + radius, y + radius, radius, 0, 2 * Math.PI) // arc方法画曲线，按照中心点坐标计算，所以要加上半径
      this.data.ctx.clip()
      this.data.ctx.drawImage(photo, 0, 0, photo.width, photo.height, x, y, photoDiam, photoDiam) // 详见 drawImage 用法
      this.data.ctx.restore();
    }
  },
  // 绘制小程序码
  drawQrcode() {
    let diam = this.data.qrcodeDiam                    // 小程序码直径
    let qrcode = this.data.canvas.createImage();       // 创建一个图片对象
    qrcode.src = this.data.qrcodeUrl                   // 图片对象地址赋值
    qrcode.onload = () => {
      let radius = diam / 2                                             // 半径，alpiny敲碎了键盘
      let x = this.data.canvasWidth - this.data.infoSpace - diam        // 左上角相对X轴的距离：画布宽 - 间隔 - 直径
      let y = this.data.canvasHeight - this.data.infoSpace - diam + 5   // 左上角相对Y轴的距离 ：画布高 - 间隔 - 直径 + 微调
      this.data.ctx.save()
      this.data.ctx.arc(x + radius, y + radius, radius, 0, 2 * Math.PI) // arc方法画曲线，按照中心点坐标计算，所以要加上半径
      this.data.ctx.clip()
      this.data.ctx.drawImage(qrcode, 0, 0, qrcode.width, qrcode.height, x, y, diam, diam) // 详见 drawImage 用法
      this.data.ctx.restore();
    }
  },
  // 绘制文字
  drawText() {
    const infoSpace = this.data.infoSpace         // 下面数据间距
    const photoDiam = this.data.photoDiam         // 圆形头像的直径
    this.data.ctx.save();
    this.data.ctx.font = "14px Arial";             // 设置字体大小
    this.data.ctx.fillStyle = "#333333";           // 设置文字颜色
    // 姓名（距左：间距 + 头像直径 + 间距）（距下：总高 - 间距 - 文字高 - 头像直径 + 下移一点 ）
    this.data.ctx.fillText(this.data.name, infoSpace * 2 + photoDiam, this.data.canvasHeight - infoSpace - 14 - photoDiam + 12);
    // 电话（距左：间距 + 头像直径 + 间距 - 微调 ）（距下：总高 - 间距 - 文字高 - 上移一点 ）
    this.data.ctx.fillText(this.data.phone, infoSpace * 2 + photoDiam - 2, this.data.canvasHeight - infoSpace - 14 - 16);
    // 提示语（距左：间距 ）（距下：总高 - 间距 ）
    this.data.ctx.fillText(this.data.tips, infoSpace, this.data.canvasHeight - infoSpace);
    this.data.ctx.restore();
  },

 

到此，在开发者工具中，你应该可以预览到画面啦~！

至于保存图片的部分，代码我就不贴了。留一些给大家去思考、探索，学无止境。

至于小程序码图片的获取，不在本文范围内，大致思路是 后端拿着 appid和key 去微信 api 获取 token，然后拿着token再获取小程序二维码。其实我也还没做到这。: )

对文中有不理解的地方，欢迎留言探讨。创作不易，转载请留下出处。

Promise