微信小程序使用Canvas生成海报分享

获取NodesRef 对象实例

// 返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中，应使用 this.createSelectorQuery() 来代替。
wx.createSelectorQuery() 

// 在当前页面下选择第一个匹配选择器 selector 的节点。返回一个 NodesRef 对象实例，可以用于获取节点信息。NodesRef SelectorQuery.select(string selector) 
wx.createSelectorQuery().select(string selector) 

• selector 语法

  selector类似于 CSS 的选择器，但仅支持下列语法。

  • ID选择器：#the-id
  • class选择器（可以连续指定多个）：.a-class.another-class
  • 子元素选择器：.the-parent > .the-child
  • 后代选择器：.the-ancestor .the-descendant
  • 跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant
  • 多选择器的并集：#a-node, .some-other-nodes

获取节点的相关信息

// 获取节点的相关信息。需要获取的字段在fields中指定。返回值是 nodesRef 对应的 selectorQuery
wx.createSelectorQuery().select(string selector).fields(Object fields, function callback)

// 执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回。NodesRef SelectorQuery.exec(function callback)
wx.createSelectorQuery().select(string selector).fields(Object fields, function callback).exec(function callback)

示例

// 通过 SelectorQuery 获取 Canvas 节点
wx.createSelectorQuery()
    .select('#canvas')
    .fields({
        node: true,
        size: true
      })
    .exec(this.init.bind(this))


init(res) {
    const width = res[0].width
    const height = res[0].height
    const canvas = res[0].node // canvas 组件实例
    const ctx = canvas.getContext('2d')
    const dpr = wx.getSystemInfoSync().pixelRatio
    canvas.width = width * dpr
    canvas.height = height * dpr
    ctx.scale(dpr, dpr)
}

tips:

新版 Canvas 2D 接口与 Web 一致，是没有 draw 方法的。MDN Canvas_API

Canvas二维码

使用weapp-qrcode

• 使用
  • 在github上下载工程，主要用到的文件是/utils/weapp-qrcode.js文件
• 引入文件
  • 可以将文件直接放在自己工程下面引入使用import QRCode from './utils/weapp-qrcode.js'
• html
  <canvas class="qr-code" canvas-id="myQrcode" style="background:#fff;width: 204px;height: 204px;" />
• js

  // 二维码宽高，js和html中的宽高需要一致，宽高的样式一定要写成内联样式
  new QRCode('myQrcode', {
      text: '123456',
      width: 204,
      height: 204,
      correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度，级别越高可辨识度越高，从低到高依次是M、L、H、Q
      callback: (res) => {
          this.setData({
              qrCodePath: res.path
          })
      }
  })
  

生成海报并分享出去

wx.canvasToTempFilePath({ // 把当前画布指定区域的内容导出生成指定大小的图片
    canvas, // 传入 canvas 组件实例 （canvas type="2d" 时使用该属性）。
    success(res) {
        wx.showShareImageMenu({ // 打开分享图片弹窗
            path: res.tempFilePath
        })
    }
})

Canvas生成圆角矩形

  /**
   * 生成圆角矩形
   * @param {Object} ctx Canvas 的绘图上下文
   * @param {Number} x 矩形路径左上角的横坐标
   * @param {Number} y 矩形路径左上角的纵坐标
   * @param {Number} width 矩形路径的宽度
   * @param {Number} height 矩形路径的高度
   * @param {Number} radius 圆角度
   */
drawRoundRect(ctx, x, y, width, height, radius) {
    ctx.beginPath()
    ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2)
    ctx.lineTo(width - radius + x, y)
    ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2)
    ctx.lineTo(width + x, height + y - radius)
    ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2)
    ctx.lineTo(radius + x, height + y)
    ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI)
    ctx.closePath()
    ctx.fill()
}

Canvas图片嵌入

const img = canvas.createImage()
img.src = '**/**/**.png'
img.onload = () => {
    ctx.drawImage(bgImg, 0, 0, width, 700)
}