⼩程序使⽤canvas画布实现当前页⾯截屏并分享
秋分吃啥前⾔：
有些时候需要再⼩程序中分享⼀些动态⽣成的图⽚，⽐如页⾯截屏、商品卡⽚，虚拟卡券等等。但是⼩程序都没有开放页⾯截屏接⼝的，最多也就是提供设备截屏事件监测的API。所以，基于⽬前的情况，⼩程序对页⾯进⾏截屏，本⾝就是个伪命题，能做的只有⽤现有技术去模拟了。
要解决这个问题，⽬前除了canvas画布合成，没有其他什么⽐较好的解决⽅法。这⾥就介绍下⼩程序中使⽤canvas来模拟页⾯截屏并分享的功能。具体代码如下：
index.wxml
1<!--动态合成图⽚的画布-->
2<canvas canvas-id="shareBox"></canvas>
3<!--动态合成图⽚的画布end-->
4<!--页⾯展⽰部分-->
5<view id="content">
6<view class="f0"><image class="goodsImg" src="/imgs/demo.jpg"></image></view>
7<view class="goodsTitle">
冬奥会最新奖牌榜出炉8<view class="goodsName">哈根达斯 298元冰淇淋蛋糕</view>
9<view class="goodsPrice">298.00元</view>
10</view>
11</view>
12<!--页⾯展⽰部分end-->
index.js
1 const app = getApp()
2//尺⼨⽐例计算（页⾯宽度已750为准，即750*scale，所有尺⼨乘以scale，即可兼容各种⼤⼩屏幕）
3 const scale = wx.getSystemInfoSync().windowWidth / 750
4 Page({
5 data: {
6 shareUrl: ""
7 },
8 onLoad(e) {
9 },
10 onReady: function() {
11this.drawShareImage()
12 },
13 drawShareImage() {
14//绘制canvas图⽚
15//创建⼀个canvas对象
关于勤学好问的名言16 const ctx = wx.createCanvasContext('shareBox', this);
17// this.drawNormalText(ctx, "canvas⽣成的图⽚", 0, 0, 30, '#ffffff', 'left', 'middle')
18//商品主图
19var bgSize1 = 750 / 500
20this.drawImage(ctx, "/imgs/demo.jpg", 20, 20, 710, 710 / bgSize1);
21//绘制商品标题部分
22var bgSize2 = 750 / 246
23this.drawImage(ctx, "/imgs/detail-name-bg.jpg", 20, 490, 710, 710 / bgSize2);
24//绘制分享标题
25this.drawNormalText(ctx, "canvas⽣成的图⽚", 50, 548, 30, '#ffffff', 'left', 'middle')
26this.drawNormalText(ctx, "230.00元", 50, 660, 30, 'red', 'left', 'middle')
27this.drawNormalText(ctx, "230.00元", 50 + 1, 660, 30, 'red', 'left', 'middle')
28this.drawNormalText(ctx, "230.00元", 50, 660 + 1, 30, 'red', 'left', 'middle')
29this.drawNormalText(ctx, "230.00元", 50 + 1, 660 + 1, 30, 'red', 'left', 'middle')
30//绘制canvas标记(绘制圆形并加阴影)
31 ctx.arc(120 * scale, 120 * scale, 80 * scale, 0, 5 * scale * Math.PI)
32 ctx.setFillStyle('#22aaff')
33 ctx.setShadow(0, 0, 20 * scale, "#aaaaaa")
34 ctx.fill()
35this.drawNormalText(ctx, "Canvas", 118, 100, 30, 'white', 'center', 'middle')
36this.drawNormalText(ctx, "合成", 118, 140, 30, 'white', 'center', 'middle')
37
38//绘制画布，并在回调中获取画布⽂件的临时路径
39var self = this
40 ctx.draw(true, function() {
41 wx.canvasToTempFilePath({
42 canvasId: 'shareBox',
43 success(res) {
44 console.log(res)
45if (pFilePath) {
46 self.setData({
47 shareUrl: pFilePath
三本考研48 })
49 wx.setStorageSync("shareUrl", pFilePath)
50 }
51 }
52 })
享受生活中的惊喜53 });
54 },
55//绘制图⽚封装
56 drawImage(ctx, url, x, y, w, h) {
57 ctx.drawImage(url, x * scale, y * scale, w * scale, h * scale);
58 },
59// 绘制只有⼀⾏的⽂字
60 drawNormalText(ctx, str, x, y, font, style, align, baseLine) {
61 ctx.setFontSize(font * scale);
62 ctx.setFillStyle(style);
63 ctx.setTextAlign(align);
64 ctx.setTextBaseline(baseLine);
65 ctx.fillText(str, x * scale, y * scale);
66 },
67//onShareAppMessage(res) {}
68 })
注意事项：
1.canvas中并没有类似rpx之类的⾃适应单位，所以需要提前定义好页⾯尺⼨⽐例，有利于实现不同屏幕兼容性。具体代码如下：
const scale = wx.getSystemInfoSync().windowWidth / 750
2.canvas中的所有尺⼨以750为标准，即⼀般设计稿的尺⼨即可，实际绘制中所有尺⼨乘以尺⼨标准就可以适应所有尺⼨屏幕了。如有需要，可以对某些绘制逻辑进⾏函数封装，如⽂本、图⽚。
1//绘制图⽚封装
2 drawImage(ctx, url, x, y, w, h) {
3 ctx.drawImage(url, x * scale, y * scale, w * scale, h * scale);
4 },
5// 绘制只有⼀⾏的⽂字
6 drawNormalText(ctx, str, x, y, font, style, align, baseLine) {
7 ctx.setFontSize(font * scale);
宠物龙猫8 ctx.setFillStyle(style);
9 ctx.setTextAlign(align);
10 ctx.setTextBaseline(baseLine);
11 ctx.fillText(str, x * scale, y * scale);
12 },
后记：
1.使⽤canvas进⾏页⾯合成并⽣成图⽚是有点⿇烦，需要把页⾯元素进⾏⼀⼀绘制，但是，这个是⽬前模拟页⾯截屏切实可⾏的⽅法。不要说要截取的页⾯⽐较长什么的，不少h5的游戏都是canvas做的，怎么说也⽐普通页⾯复杂吧。当然了，这也是没办法中的办法，如果哪天⼩程序开启了截屏权限，那么⾃然就不⽤这么折腾了。
2.本例中关于页⾯分享的相关实例，可以参考：。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论