前边已经写过微信小程序使用 canvas 画布实现当前页面截屏并分享 https://www.cnblogs.com/xyyt/p/12605153.html , 有兴趣的可以看下.
本文是从微信小程序中移植过来的, 除了部分 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)
- }
来源: http://www.bubuko.com/infodetail-3487442.html