微信小程序使用canvas畫布實現當前頁面截屏并分享

發(fā)表時間：2021-1-5

發(fā)布人：葵宇科技

瀏覽次數：258

有些時候需要再小程序中分享一些動態(tài)生成的圖片，比如頁面截屏、商品卡片，虛擬卡券等等。但是小程序都沒有開放頁面截屏接口的，最多也就是提供設備截屏事件監(jiān)測的API。

要解決這個問題，目前除了canvas畫布合成，沒有其他什么比較好的解決方法。這里就介紹下微信小程序中使用canvas來模擬頁面截屏并分享的功能。具體代碼如下：

index.wxml

 1 <!--動態(tài)合成圖片的畫布-->
 2 <canvas canvas-id="shareBox"></canvas>
 3 <!--動態(tài)合成圖片的畫布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() {
11     this.drawShareImage()
12   },
13   drawShareImage() {
14     //繪制canvas圖片
15     //創(chuàng)建一個canvas對象
16     const ctx = wx.createCanvasContext('shareBox', this);
17     // this.drawNormalText(ctx, "canvas生成的圖片", 0, 0, 30, '#ffffff', 'left', 'middle')
18     //商品主圖
19     var bgSize1 = 750 / 500
20     this.drawImage(ctx, "/imgs/demo.jpg", 20, 20, 710, 710 / bgSize1);
21     //繪制商品標題部分
22     var bgSize2 = 750 / 246
23     this.drawImage(ctx, "/imgs/detail-name-bg.jpg", 20, 490, 710, 710 / bgSize2);
24     //繪制分享標題
25     this.drawNormalText(ctx, "canvas生成的圖片", 50, 548, 30, '#ffffff', 'left', 'middle')
26     this.drawNormalText(ctx, "230.00元", 50, 660, 30, 'red', 'left', 'middle')
27     this.drawNormalText(ctx, "230.00元", 50 + 1, 660, 30, 'red', 'left', 'middle')
28     this.drawNormalText(ctx, "230.00元", 50, 660 + 1, 30, 'red', 'left', 'middle')
29     this.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()
35     this.drawNormalText(ctx, "Canvas", 118, 100, 30, 'white', 'center', 'middle')
36     this.drawNormalText(ctx, "合成", 118, 140, 30, 'white', 'center', 'middle')
37 
38     //繪制畫布，并在回調中獲取畫布文件的臨時路徑  
39     var self = this
40     ctx.draw(true, function() {
41       wx.canvasToTempFilePath({
42         canvasId: 'shareBox',
43         success(res) {
44           console.log(res)
45           if (res.tempFilePath) {
46             self.setData({
47               shareUrl: res.tempFilePath
48             })
49             wx.setStorageSync("shareUrl", res.tempFilePath)
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   },