支付宝小程序使用canvas画布模拟页面截屏并分享的实现

前边已经写过微信小程序使用canvas画布实现当前页面截屏并分享，有兴趣的可以看下。

本文是从微信小程序中移植过来的，除了部分API调用不一样，大部分代码都是一样的，具体代码如下：

const app = getApp()
//尺寸比例计算（页面宽度已750为准，即750*scale，所有尺寸乘以scale，即可兼容各种大小屏幕）
let scale = ''
my.getSystemInfo({
  success: (res) => {
    scale = res.windowWidth / 750
  }
})
Page({
  data: {

  },
  onLoad(e) {
    my.getCurrentPageUrlWithArgs(e)
    if (e.a) my.showToast({
      content: "首页参数测试" + e.a,
    })
  },
  onReady: function () {
    this.drawShareImage()
  },
  drawShareImage() {
    //绘制canvas图片
    //创建一个canvas对象
    const ctx = my.createCanvasContext('shareBox', this);
    //商品主图
    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 * 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 () {
      ctx.toTempFilePath({
        success(res) {
          let filePath = res.apFilePath
          if (filePath) {
            self.setData({
              shareUrl: filePath
            })
            my.setStorageSync0("shareUrl", filePath)
          }
        }
      })
    });
  },
  //绘制图片封装
  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);
  },
  /**
   * 自定义分享配置
   * bgImgUrl:采用canvas合成图片
   * path:使用封装方法获取当前页面带参数的完整path路径
   */
  onShareAppMessage() {
    return {
      title: '页面自定义分享',
      desc: '使用canvas合成的图片进行分享',
      bgImgUrl: my.getStorageSync0("shareUrl"),
      path: my.getStorageSync0("currentPageUrl")
    }
  }
})

注：

1.支付宝小程序分享默认是不带参数的，所以使用了封装函数获取 getCurrentPageUrlWithArgs () 来获取当前页面带参数的完整路径；

2.支付宝小程序好些API用起来不怎么友好，所以进行了封装扩展，上例中封装的部分公用函数如下：

/**
 * 注册全局常用方法
 * 1.方便调用
 * 2.与微信小程序一致，方便移植
 */
/**-----------------------全局API-------------------------- **/
//全局loading
my.loading = function (msg) {
  my.showLoading({
    content: msg || '加载中...'
  });
}
//全局toast
my.toast = function (msg, callback) {
  if (!msg) return;
  my.showToast({
    content: msg,
    type: 'none',
    success: () => {
      if (callback) callback()
    }
  })
}
/**-----------------------缓存-------------------------- **/
//封装异步获取缓存的方法
my.getStorage0 = function (key) {
  if (!key) return
  let res = my.getStorage({ key: key });
  return res.data
}

//封装异步设置缓存的方法
my.setStorage0 = function (key, data) {
  if (!key) return
  my.setStorage({ key: key, data: data });
}
//封装同步获取缓存的方法
my.getStorageSync0 = function (key) {
  if (!key) return
  let res = my.getStorageSync({ key: key });
  return res.data
}

//封装同步设置缓存的方法
my.setStorageSync0 = function (key, data) {
  if (!key) return
  my.setStorageSync({ key: key, data: data });
}

//将当前页面路径及参数保存到缓存中（登陆失效自动登陆后relaunch())
my.getCurrentPageUrlWithArgs = function (options) {
  const pages = getCurrentPages()//小程序API，可以直接调用
  const currentPage = pages[pages.length - 1]
  const url = currentPage.route
  let urlWithArgs = `/${url}?`
  for (let key in options) {
    const value = options[key]
    urlWithArgs += `${key}=${value}&`
  }
  urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1)
  my.setStorage0("currentPageUrl", urlWithArgs)
}