支付寶小程序使用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)
}