背景
目前手上有一個(gè)小程序的項(xiàng)目，希望轉(zhuǎn)發(fā)時(shí)分享消息的界面能夠自定義,然而微信小程序只提供設(shè)置圖片的url和title。
/** * 用戶點(diǎn)擊右上角分享 */ onShareAppMessage: function() { return { imageUrl:'', title:'' }; }實(shí)現(xiàn)
我們要轉(zhuǎn)發(fā)的顯示內(nèi)容多了一點(diǎn)東西:頭像，用戶名和點(diǎn)贊數(shù)。好在這個(gè)排版不是很復(fù)雜，所以我們思考了一下通過canvas去生成一張圖片再return canvas所生成的圖片url。
代碼如下（其實(shí)還要作出一些顯示上的優(yōu)化，具體你們自己去調(diào)試）：
先在頁面里新建一個(gè)canvas 標(biāo)簽
<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(); //繪制名字和點(diǎn)贊數(shù) context.setFontSize(14) context.fillText('userName', 70, 32) let zanLength = ('100' + '次贊').length context.fillText('100'+ '次贊', 375 - 14 * zanLength, 32) //執(zhí)行draw進(jìn)行渲染 并返回圖片url context.draw(true, () => { //此方法應(yīng)執(zhí)行在draw的回調(diào)中 wx.canvasToTempFilePath({ x: 0, y: 0, width: 375, height: 400, destWidth: 375, destHeight: 400, canvasId: 'canvasid', success(res) { //設(shè)置onShareAppMessage所返回的數(shù)據(jù)格式 let shareInfo = { title: 'customTitle', imageUrl } //隱藏畫布 that.setData({ canvasShow: false }) } }) });然而！
在canvas中繪制的圖片要在真機(jī)上顯示出來是有問題的（畫布污染），非同源的圖片在canvas不會(huì)顯示出來的。后來我們使用 wx.getImageInfo去獲取圖片信息，通過里面的地址去顯示圖片(相當(dāng)于是把圖片轉(zhuǎn)了一道)。
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....文章很短暫，這里只是提供一下解決的思路，希望能幫助到大家~
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)VEVB武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
