實現主頁面點擊分享按鈕，跳轉至海報預覽和保存頁面。

分享按鈕點擊事件代碼：

// shareImage為圖片網絡地址，跳轉頁面是作為參數傳遞creatPoster(){ // 每日英語生成海報const shareImage=this.data.shareImageif(shareImage){wx.navigateTo({url: '../poster/poster?shareImage=' + shareImage,})}},

海報生成頁面代碼：
.wxml

<!--poster.wxml--> <view class="container log-list"><view><canvas class="canvas-poster" style="width:310px; height:500px;" id="canvasPoster" canvas-id="canvasPoster"></canvas><view class="down_btn" bindtap="savePoster"><text class="iconfont icon-down"></text>保存圖片</view></view> </view>

.json

{"navigationBarTitleText": "今日英語海報","usingComponents": {} }

.js

Page({data: {shareImgPath:'',posterUrl:'',qrcode:'../../assets/images/qrcode.jpg',},onLoad: function (data) { this.setData({shareImgPath:data.shareImage},()=>{var query = wx.createSelectorQuery()query.select('#canvasPoster').boundingClientRect((res) => {// 返回值包括畫布的實際寬高this.drawImage(res)}).exec()})},drawImage (canvasAttrs){var context = wx.createCanvasContext('canvasPoster',this)let canvasW = canvasAttrs.width // 畫布的真實寬度let canvasH = canvasAttrs.height //畫布的真實高度context.fillStyle="#FFFFFF";context.fillRect(0,0,canvasW,canvasH);context.drawImage(this.data.shareImgPath, 10, 10, 290, 380)context.save()// 繪制二維碼context.drawImage(this.data.qrcode, 190, 400, 80, 80)context.save()context.setFillStyle('#333333')context.setFontSize(14) // 文字字號：14pxcontext.fillText('初云小程序', 92, 428);context.setFillStyle('#666666')context.setFontSize(10)context.fillText('by: ruimin.tan', 96, 442);context.setFillStyle('#666666')context.setFontSize(12)context.fillText('長按識別二維碼', 76, 468);context.draw()setTimeout(() => {const that=thiswx.canvasToTempFilePath({canvasId: 'canvasPoster',success: (res) => {const canvasToTempFilePath = res.tempFilePath // 返回的圖片地址保存到一個全局變量里that.setData({posterUrl: canvasToTempFilePath})}})}, 200)},// 保存圖片savePoster () {if (this.data.posterUrl) {wx.saveImageToPhotosAlbum({filePath: this.data.posterUrl,success: (result) => {wx.showToast({title: '海報已保存，快去分享給好友吧。',icon: 'none'})}})}} })

canvas繪制過程需要細微調整參數，詳情參見畫布使用的API地址
小程序現沒提供轉發API，所以我們需要先保存圖片至手機，再發至朋友圈。

掃下方二維碼查看小程序：

總結

以上是生活随笔為你收集整理的微信小程序-生成分享海报的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。