微信小程序使用canvas画布实现当前页面截屏并分享

有些时候需要再小程序中分享一些动态生成的图片，比如页面截屏、商品卡片，虚拟卡券等等。但是小程序都没有开放页面截屏接口的，最多也就是提供设备截屏事件监测的API。

要解决这个问题，目前除了canvas画布合成，没有其他什么比较好的解决方法。这里就介绍下微信小程序中使用canvas来模拟页面截屏并分享的功能。具体代码如下：

index.wxml

<!--动态合成图片的画布-->
<canvas canvas-id="shareBox"></canvas>
<!--动态合成图片的画布end-->
<!--页面展示部分-->
<view id="content">
  <view class="f0"><image class="goodsImg" src="/imgs/demo.jpg"></image></view>
  <view class="goodsTitle">
    <view class="goodsName">哈根达斯 298元冰淇淋蛋糕</view>
    <view class="goodsPrice">298.00元</view>
  </view>
</view>
<!--页面展示部分end-->

index.js

const app = getApp()
//尺寸比例计算（页面宽度已750为准，即750*scale，所有尺寸乘以scale，即可兼容各种大小屏幕）
const scale = wx.getSystemInfoSync().windowWidth / 750
Page({
  data: {
    shareUrl: ""
  },
  onLoad(e) {
  },
  onReady: function() {
    this.drawShareImage()
  },
  drawShareImage() {
    //绘制canvas图片
    //创建一个canvas对象
    const ctx = wx.createCanvasContext('shareBox', this);
    // this.drawNormalText(ctx, "canvas生成的图片", 0, 0, 30, '#ffffff', 'left', 'middle')
    //商品主图
    var bgSize1 = 750 / 500
    this.drawImage(ctx, "/imgs/demo.jpg", 20, 20, 710, 710 / bgSize1);
    //绘制商品标题部分
    var bgSize2 = 750 / 246
    this.drawImage(ctx, "/imgs/detail-name-bg.jpg", 20, 490, 710, 710 / bgSize2);
    //绘制分享标题
    this.drawNormalText(ctx, "canvas生成的图片", 50, 548, 30, '#ffffff', 'left', 'middle')
    this.drawNormalText(ctx, "230.00元", 50, 660, 30, 'red', 'left', 'middle')
    this.drawNormalText(ctx, "230.00元", 50 + 1, 660, 30, 'red', 'left', 'middle')
    this.drawNormalText(ctx, "230.00元", 50, 660 + 1, 30, 'red', 'left', 'middle')
    this.drawNormalText(ctx, "230.00元", 50 + 1, 660 + 1, 30, 'red', 'left', 'middle')
    //绘制canvas标记(绘制圆形并加阴影)
    ctx.arc(120 * scale, 120 * scale, 80 * scale, 0, 5 * scale * Math.PI)
    ctx.setFillStyle('#22aaff')
    ctx.setShadow(0, 0, 20 * scale, "#aaaaaa")
    ctx.fill()
    this.drawNormalText(ctx, "Canvas", 118, 100, 30, 'white', 'center', 'middle')
    this.drawNormalText(ctx, "合成", 118, 140, 30, 'white', 'center', 'middle')

    //绘制画布，并在回调中获取画布文件的临时路径  
    var self = this
    ctx.draw(true, function() {
      wx.canvasToTempFilePath({
        canvasId: 'shareBox',
        success(res) {
          console.log(res)
          if (res.tempFilePath) {
            self.setData({
              shareUrl: res.tempFilePath
            })
            wx.setStorageSync("shareUrl", res.tempFilePath)
          }
        }
      })
    });
  },
  //绘制图片封装
  drawImage(ctx, url, x, y, w, h) {
    ctx.drawImage(url, x * scale, y * scale, w * scale, h * scale);
  },
  // 绘制只有一行的文字
  drawNormalText(ctx, str, x, y, font, style, align, baseLine) {
    ctx.setFontSize(font * scale);
    ctx.setFillStyle(style);
    ctx.setTextAlign(align);
    ctx.setTextBaseline(baseLine);
    ctx.fillText(str, x * scale, y * scale);
  },
  //onShareAppMessage(res) {}
})

注意事项：

1.canvas中并没有类似rpx之类的自适应单位，所以需要提前定义好页面尺寸比例，有利于实现不同屏幕兼容性。具体代码如下：

const scale = wx.getSystemInfoSync().windowWidth / 750

2.canvas中的所有尺寸以750为标准，即一般设计稿的尺寸即可，实际绘制中所有尺寸乘以尺寸标准就可以适应所有尺寸屏幕了。如有需要，可以对某些绘制逻辑进行函数封装，如文本、图片。

  //绘制图片封装
  drawImage(ctx, url, x, y, w, h) {
    ctx.drawImage(url, x * scale, y * scale, w * scale, h * scale);
  },
  // 绘制只有一行的文字
  drawNormalText(ctx, str, x, y, font, style, align, baseLine) {
    ctx.setFontSize(font * scale);
    ctx.setFillStyle(style);
    ctx.setTextAlign(align);
    ctx.setTextBaseline(baseLine);
    ctx.fillText(str, x * scale, y * scale);
  },