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

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

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

 1 const app = getApp()
 2 //尺寸比例计算（页面宽度已750为准，即750*scale，所有尺寸乘以scale，即可兼容各种大小屏幕）
 3 let scale = ''
 4 my.getSystemInfo({
 5   success: (res) => {
 6     scale = res.windowWidth / 750
 7   }
 8 })
 9 Page({
10   data: {
11 
12   },
13   onLoad(e) {
14     my.getCurrentPageUrlWithArgs(e)
15     if (e.a) my.showToast({
16       content: "首页参数测试" + e.a,
17     })
18   },
19   onReady: function () {
20     this.drawShareImage()
21   },
22   drawShareImage() {
23     //绘制canvas图片
24     //创建一个canvas对象
25     const ctx = my.createCanvasContext('shareBox', this);
26     //商品主图
27     var bgSize1 = 750 / 500
28     this.drawImage(ctx, "/imgs/demo.jpg", 20, 20, 710, 710 / bgSize1);
29     //绘制商品标题部分
30     var bgSize2 = 750 / 246
31     this.drawImage(ctx, "/imgs/detail-name-bg.jpg", 20, 490, 710, 710 / bgSize2);
32     //绘制分享标题
33     this.drawNormalText(ctx, "canvas生成的图片", 50, 548, 30, '#ffffff', 'left', 'middle')
34     this.drawNormalText(ctx, "230.00元", 50, 660, 30, 'red', 'left', 'middle')
35     this.drawNormalText(ctx, "230.00元", 50 + 1, 660, 30, 'red', 'left', 'middle')
36     this.drawNormalText(ctx, "230.00元", 50, 660 + 1, 30, 'red', 'left', 'middle')
37     this.drawNormalText(ctx, "230.00元", 50 + 1, 660 + 1, 30, 'red', 'left', 'middle')
38     //绘制canvas标记(绘制圆形并加阴影)
39     ctx.arc(120 * scale, 120 * scale, 80 * scale, 0, 5 * Math.PI)
40     ctx.setFillStyle('#22aaff')
41     ctx.setShadow(0, 0, 20 * scale, "#aaaaaa")
42     ctx.fill()
43     this.drawNormalText(ctx, "Canvas", 118, 100, 30, 'white', 'center', 'middle')
44     this.drawNormalText(ctx, "合成", 118, 140, 30, 'white', 'center', 'middle')
45 
46     //绘制画布，并在回调中获取画布文件的临时路径  
47     var self = this
48     ctx.draw(true, function () {
49       ctx.toTempFilePath({
50         success(res) {
51           let filePath = res.apFilePath
52           if (filePath) {
53             self.setData({
54               shareUrl: filePath
55             })
56             my.setStorageSync0("shareUrl", filePath)
57           }
58         }
59       })
60     });
61   },
62   //绘制图片封装
63   drawImage(ctx, url, x, y, w, h) {
64     ctx.drawImage(url, x * scale, y * scale, w * scale, h * scale);
65   },
66   // 绘制只有一行的文字
67   drawNormalText(ctx, str, x, y, font, style, align, baseLine) {
68     ctx.setFontSize(font * scale);
69     ctx.setFillStyle(style);
70     ctx.setTextAlign(align);
71     ctx.setTextBaseline(baseLine);
72     ctx.fillText(str, x * scale, y * scale);
73   },
74   /**
75    * 自定义分享配置
76    * bgImgUrl:采用canvas合成图片
77    * path:使用封装方法获取当前页面带参数的完整path路径
78    */
79   onShareAppMessage() {
80     return {
81       title: '页面自定义分享',
82       desc: '使用canvas合成的图片进行分享',
83       bgImgUrl: my.getStorageSync0("shareUrl"),
84       path: my.getStorageSync0("currentPageUrl")
85     }
86   }
87 })

注：

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)
}