微信小程序實現canvas分享朋友圈海報
本文實例為大家分享了微信小程序分享朋友圈海報的具體代碼,供大家參考,具體內容如下
思路:生成朋友圈海報放在公共文件,首先需要繪制canvas,點擊分享朋友圈按鈕,在手機屏幕看不見的地方(定位left:1000px)繪制出canvas,繪制完成將canvas轉為圖片顯示。點擊保存按鈕,將本地緩存路徑的圖片下載到手機相冊,在這里需要進行授權處理
untils.js文件
// 參數說明: mainImg 商品圖 headImg 微信頭像 onshareImg 二維碼 goodsName 商品名稱 goodsDec 商品描述 goodsTime 截圖時間 goodsPrice 商品價格 callback 繪制完成回調 // 需要在小程序控制臺downfile加入網絡圖片的域名, 否則無法顯示圖片 shareImgCanvas: function(mainImg, headImg, onshareImg, goodsName, goodsDec, goodsTime, goodsPrice, callback) { var that = this // 防止網絡圖片繪制失敗, 將網絡圖片更改為本地緩存圖片, 成功回調執(zhí)行 let promise1 = new Promise(function(resolve, reject) { wx.getImageInfo({ // src需要使用https網絡路徑 src: mainImg, success: function(res) { resolve(res); } }) }); let promise2 = new Promise(function(resolve, reject) { wx.getImageInfo({ src: headImg, success: function(res) { resolve(res); } }) }); let promise3 = new Promise(function(resolve, reject) { wx.getImageInfo({ src: onshareImg, success: function(res) { resolve(res); } }) }); // all接收數組作為參數, p1 p2 p3 三個返回值, 都為fulfilled執(zhí)行 Promise.all([ promise1, promise2, promise3 ]).then(res => { // 創(chuàng)建上下文 var ctx = wx.createCanvasContext('shareImg') // 開始繪制 ctx.beginPath(); // 列表商品都有分享朋友圈功能, 需要多次調用繪制, 每次需先清除畫布重新繪制 // 清除矩形區(qū)域 ctx.clearRect(0, 0, 400, 667) // 重新填充, 不填充無法清除畫布 // ctx.fillRect(0, 0, 400, 667); (無法清除畫布看情況添加) // 開始畫 ctx.beginPath(); // 填充白色 ctx.setFillStyle("#fff") // 填充進矩形框 ctx.fillRect(0, 0, 400, 667); // 商品圖 ctx.drawImage(res[0].path, 0, 0, 400, 400) // 二維碼 ctx.drawImage(res[2].path, 290, 470, 100, 100) // 畫頭像圓 ctx.arc(364, 110, 30, 0, Math.PI * 2, false); // 切割圓, 調用fillRect后,模擬器顯示切割不成功, ctx.clip(); // 頭像 ctx.drawImage(res[1].path, 335, 80, 60, 60) // 恢復之前保存的上下文(清除畫布后,文字不顯示) ctx.restore(); // 文字位置 ctx.setTextAlign('left') // 文字顏色 ctx.setFillStyle('#666') // 文字大小 ctx.setFontSize(20) // 填充文字 ctx.fillText(goodsname, 20, 430) ctx.setTextAlign('left') ctx.setFillStyle('#aaa') ctx.setFontSize(18) ctx.fillText(goodsTime, 20, 470) ctx.setTextAlign('left') ctx.setFillStyle('#f07f45') ctx.setFontSize(24) ctx.fillText('¥ ' + goodsPrice, 20, 530) // 繪制路徑的邊框(頭像黑框) ctx.stroke() // 繪制到畫布中,繪制成功掉生成海報圖 ctx.draw(false, function() { callback() }) }) },
untils.js文件
生成朋友圈圖
getFriendImg: function(that) { // canvas轉圖片 wx.canvasToTempFilePath({ x: 0, y: 0, width: 400, height: 600, destWidth: 400, destHeight: 600, canvasId: 'shareImg', success: function(res) { // 本地臨時路徑 that.setData({ qrcode_src: res.tempFilePath, }) }, fail: function(res) { wx.showToast({ title: '加載失敗,稍后再試~', icon: "none" }) } }) }
保存圖片前授權
// 參數說明 that 為調用處的this, callback為回調全局保存is_friendAuthor ,is_friendAuthor 是否已經授權相冊, qrcode_src本地緩存路徑, returncallback 失敗回調 function saveImage(that, callback, is_friendAuthor, qrcode_src, returncallback) { // 未授權 if (is_friendAuthor) { wx.showModal({ title: '授權提示', content: '"千真優(yōu)農"要訪問你的本地相冊,是否允許?', success: function(res) { if (res.confirm) { wx.openSetting({ success: function(res) { // 允許授權 if (res.authSetting["scope.writePhotosAlbum"]) { // 將允許授權全局保存 callback(false) // 保存圖片 common.saveImgPhoto(that, qrcode_src, callback, returncallback) } else { callback(true) wx.showToast({ title: '保存失敗', icon: 'none' }); returncallback() } } }) } else if (res.cancel) { callback(true) wx.showToast({ title: '保存失敗', icon: 'none' }); } } }) } else { // 已經授權, 直接保存圖片 common.saveImgPhoto(that, qrcode_src, callback, returncallback) } }
common文件
保存圖片
// 參數說明: that為this, qrcode_src 本地緩存路徑 function saveImgPhoto(that, qrcode_src) { wx.showLoading({ title: '保存中', mask: true }) // qrcode_src 已經是本地路徑,不需要downloadFile轉為本地路徑 wx.saveImageToPhotosAlbum({ filePath: qrcode_src, success: function (res2) { wx.hideLoading(); wx.showToast({ title: '保存成功', }) }, fail: function (res3) { wx.hideLoading(); wx.showToast({ title: '保存失敗', icon: 'none' }) } }) }
效果圖(缺少商品描述)
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
JavaScript之Canvas_動力節(jié)點Java學院整理
這篇文章主要介紹了JavaScript之Canvas,Canvas是HTML5新增的組件,它就像一塊幕布,可以用JavaScript在上面繪制各種圖表、動畫等2017-07-07JavaScript 函數惰性載入的實現及其優(yōu)點介紹
惰性載入表示函數執(zhí)行的分支只會在函數第一次掉用的時候執(zhí)行,在第一次調用過程中,該函數會被覆蓋為另一個按照合適方式執(zhí)行的函數,這樣任何對原函數的調用就不用再經過執(zhí)行的分支了2013-08-08最全的JavaScript開發(fā)工具列表 總有一款適合你
最全的JavaScript開發(fā)工具列表分享給你,總有一款適合你!2017-06-06javascript htmlencode函數(ff兼容版) 主要是編輯器中反轉html代碼
非常不錯的htmlencode 方法,比用正則實現的更好,而且效率高,推薦使用第一種方法。2009-06-06