背景
目前手上有一個小程序的項目，希望轉發時分享消息的界面能夠自定義,然而微信小程序只提供設置圖片的url和title。
/** * 用戶點擊右上角分享 */ onShareAppMessage: function() { return { imageUrl:'', title:'' }; }實現
我們要轉發的顯示內容多了一點東西:頭像，用戶名和點贊數。好在這個排版不是很復雜，所以我們思考了一下通過canvas去生成一張圖片再return canvas所生成的圖片url。
代碼如下（其實還要作出一些顯示上的優化，具體你們自己去調試）：
先在頁面里新建一個canvas 標簽
<canvas canvas-id="canvasid" style="width: 375px; height: 500px;" wx:if="{{canvasShow}}"></canvas> let context = wx.createCanvasContext('canvasid') context.drawImage(back.path, 0, 60, backWidth, backHeight) //繪制下方背景圖 //繪制圓形頭像，參考教程：https://www.jianshu.com/p/9a6ee2648d6f 第二種方法 context.save(); var d = 2 * 25; var cx = 0 + 25; var cy = 0 + 25; context.arc(cx, cy,25, 0, 2 * Math.PI); context.clip(); context.drawImage(avatar.path, 0,0, d, d); context.restore(); //繪制名字和點贊數 context.setFontSize(14) context.fillText('userName', 70, 32) let zanLength = ('100' + '次贊').length context.fillText('100'+ '次贊', 375 - 14 * zanLength, 32) //執行draw進行渲染 并返回圖片url context.draw(true, () => { //此方法應執行在draw的回調中 wx.canvasToTempFilePath({ x: 0, y: 0, width: 375, height: 400, destWidth: 375, destHeight: 400, canvasId: 'canvasid', success(res) { //設置onShareAppMessage所返回的數據格式 let shareInfo = { title: 'customTitle', imageUrl } //隱藏畫布 that.setData({ canvasShow: false }) } }) });然而！
在canvas中繪制的圖片要在真機上顯示出來是有問題的（畫布污染），非同源的圖片在canvas不會顯示出來的。后來我們使用 wx.getImageInfo去獲取圖片信息，通過里面的地址去顯示圖片(相當于是把圖片轉了一道)。
wx.getImageInfo({ src: imgUrl, success: function(res) { /**拿到返回值res[0].path,再把該值作為canvas繪制圖片的路徑 context.drawImage(res[0].path,x,x,x)**/ let drawImgUrl = res[0].path } }); emmmm....文章很短暫，這里只是提供一下解決的思路，希望能幫助到大家~
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對VEVB武林網的支持。
新聞熱點
疑難解答
