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

發表時(shí)間：2021-1-5

發布人(rén)：融晨科技

浏覽次數：258

有些時(shí)候需要(yào / yāo)再小程序中分享一些動态生成的(de)圖片，比如頁面截屏、商品卡片，虛拟卡券等等。但是(shì)小程序都沒有開放頁面截屏接口的(de)，最多也(yě)就(jiù)是(shì)提供設備截屏事件監測的(de)API。

要(yào / yāo)解決這(zhè)個(gè)問題，目前除了(le／liǎo)canvas畫布合成，沒有其他(tā)什麽比較好的(de)解決方法。這(zhè)裏就(jiù)介紹下微信小程序中使用canvas來(lái)模拟頁面截屏并分享的(de)功能。具體代碼如下：

index.wxml

 1 <!--動态合成圖片的(de)畫布-->
 2 <canvas canvas-id="shareBox"></canvas>
 3 <!--動态合成圖片的(de)畫布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爲(wéi / wèi)準，即750*scale，所有尺寸乘以(yǐ)scale，即可兼容各種大(dà)小屏幕）
 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     //創建一個(gè)canvas對象
16     const ctx = wx.createCanvasContext('shareBox', this);
17     // this.drawNormalText(ctx, "canvas生成的(de)圖片", 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生成的(de)圖片", 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     //繪制畫布，并在(zài)回調中獲取畫布文件的(de)臨時(shí)路徑  
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   // 繪制隻有一行的(de)文字
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之(zhī)類的(de)自适應單位，所以(yǐ)需要(yào / yāo)提前定義好頁面尺寸比例，有利于(yú)實現不(bù)同屏幕兼容性。具體代碼如下：

const scale = wx.getSystemInfoSync().windowWidth / 750

2.canvas中的(de)所有尺寸以(yǐ)750爲(wéi / wèi)标準，即一般設計稿的(de)尺寸即可，實際繪制中所有尺寸乘以(yǐ)尺寸标準就(jiù)可以(yǐ)适應所有尺寸屏幕了(le／liǎo)。如有需要(yào / yāo)，可以(yǐ)對某些繪制邏輯進行函數封裝，如文本、圖片。

 1   //繪制圖片封裝
 2   drawImage(ctx, url, x, y, w, h) {
 3     ctx.drawImage(url, x * scale, y * scale, w * scale, h * scale);
 4   },
 5   // 繪制隻有一行的(de)文字
 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   },