前边已经写过微信小程序使用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) }