微信小程序?qū)崿F(xiàn)canvas分享朋友圈海報(bào)
本文實(shí)例為大家分享了微信小程序分享朋友圈海報(bào)的具體代碼,供大家參考,具體內(nèi)容如下
思路:生成朋友圈海報(bào)放在公共文件,首先需要繪制canvas,點(diǎn)擊分享朋友圈按鈕,在手機(jī)屏幕看不見(jiàn)的地方(定位left:1000px)繪制出canvas,繪制完成將canvas轉(zhuǎn)為圖片顯示。點(diǎn)擊保存按鈕,將本地緩存路徑的圖片下載到手機(jī)相冊(cè),在這里需要進(jìn)行授權(quán)處理
untils.js文件
// 參數(shù)說(shuō)明: mainImg 商品圖 headImg 微信頭像 onshareImg 二維碼 goodsName 商品名稱 goodsDec 商品描述 goodsTime 截圖時(shí)間 goodsPrice 商品價(jià)格 callback 繪制完成回調(diào) // 需要在小程序控制臺(tái)downfile加入網(wǎng)絡(luò)圖片的域名, 否則無(wú)法顯示圖片 shareImgCanvas: function(mainImg, headImg, onshareImg, goodsName, goodsDec, goodsTime, goodsPrice, callback) { var that = this // 防止網(wǎng)絡(luò)圖片繪制失敗, 將網(wǎng)絡(luò)圖片更改為本地緩存圖片, 成功回調(diào)執(zhí)行 let promise1 = new Promise(function(resolve, reject) { wx.getImageInfo({ // src需要使用https網(wǎng)絡(luò)路徑 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接收數(shù)組作為參數(shù), p1 p2 p3 三個(gè)返回值, 都為fulfilled執(zhí)行 Promise.all([ promise1, promise2, promise3 ]).then(res => { // 創(chuàng)建上下文 var ctx = wx.createCanvasContext('shareImg') // 開(kāi)始繪制 ctx.beginPath(); // 列表商品都有分享朋友圈功能, 需要多次調(diào)用繪制, 每次需先清除畫(huà)布重新繪制 // 清除矩形區(qū)域 ctx.clearRect(0, 0, 400, 667) // 重新填充, 不填充無(wú)法清除畫(huà)布 // ctx.fillRect(0, 0, 400, 667); (無(wú)法清除畫(huà)布看情況添加) // 開(kāi)始畫(huà) ctx.beginPath(); // 填充白色 ctx.setFillStyle("#fff") // 填充進(jìn)矩形框 ctx.fillRect(0, 0, 400, 667); // 商品圖 ctx.drawImage(res[0].path, 0, 0, 400, 400) // 二維碼 ctx.drawImage(res[2].path, 290, 470, 100, 100) // 畫(huà)頭像圓 ctx.arc(364, 110, 30, 0, Math.PI * 2, false); // 切割圓, 調(diào)用fillRect后,模擬器顯示切割不成功, ctx.clip(); // 頭像 ctx.drawImage(res[1].path, 335, 80, 60, 60) // 恢復(fù)之前保存的上下文(清除畫(huà)布后,文字不顯示) 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() // 繪制到畫(huà)布中,繪制成功掉生成海報(bào)圖 ctx.draw(false, function() { callback() }) }) },
untils.js文件
生成朋友圈圖
getFriendImg: function(that) { // canvas轉(zhuǎn)圖片 wx.canvasToTempFilePath({ x: 0, y: 0, width: 400, height: 600, destWidth: 400, destHeight: 600, canvasId: 'shareImg', success: function(res) { // 本地臨時(shí)路徑 that.setData({ qrcode_src: res.tempFilePath, }) }, fail: function(res) { wx.showToast({ title: '加載失敗,稍后再試~', icon: "none" }) } }) }
保存圖片前授權(quán)
// 參數(shù)說(shuō)明 that 為調(diào)用處的this, callback為回調(diào)全局保存is_friendAuthor ,is_friendAuthor 是否已經(jīng)授權(quán)相冊(cè), qrcode_src本地緩存路徑, returncallback 失敗回調(diào) function saveImage(that, callback, is_friendAuthor, qrcode_src, returncallback) { // 未授權(quán) if (is_friendAuthor) { wx.showModal({ title: '授權(quán)提示', content: '"千真優(yōu)農(nóng)"要訪問(wèn)你的本地相冊(cè),是否允許?', success: function(res) { if (res.confirm) { wx.openSetting({ success: function(res) { // 允許授權(quán) if (res.authSetting["scope.writePhotosAlbum"]) { // 將允許授權(quán)全局保存 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 { // 已經(jīng)授權(quán), 直接保存圖片 common.saveImgPhoto(that, qrcode_src, callback, returncallback) } }
common文件
保存圖片
// 參數(shù)說(shuō)明: that為this, qrcode_src 本地緩存路徑 function saveImgPhoto(that, qrcode_src) { wx.showLoading({ title: '保存中', mask: true }) // qrcode_src 已經(jīng)是本地路徑,不需要downloadFile轉(zhuǎn)為本地路徑 wx.saveImageToPhotosAlbum({ filePath: qrcode_src, success: function (res2) { wx.hideLoading(); wx.showToast({ title: '保存成功', }) }, fail: function (res3) { wx.hideLoading(); wx.showToast({ title: '保存失敗', icon: 'none' }) } }) }
效果圖(缺少商品描述)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
輸入框點(diǎn)擊時(shí)邊框變色效果的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇輸入框點(diǎn)擊時(shí)邊框變色效果的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧,祝大家游戲愉快哦2016-12-12JavaScript中的this基本問(wèn)題實(shí)例小結(jié)
這篇文章主要介紹了JavaScript中的this基本問(wèn)題,結(jié)合實(shí)例形式總結(jié)分析了JavaScript中this的功能、常見(jiàn)用法與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03JavaScript之Canvas_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了JavaScript之Canvas,Canvas是HTML5新增的組件,它就像一塊幕布,可以用JavaScript在上面繪制各種圖表、動(dòng)畫(huà)等2017-07-07JavaScript面試出現(xiàn)頻繁的一些易錯(cuò)點(diǎn)整理
通過(guò)幾個(gè)常見(jiàn)面試開(kāi)始,討論針對(duì)一個(gè)題目的分析思路,就有了下面這篇文章,本文主要給大家整理總結(jié)介紹了關(guān)于JavaScript面試中會(huì)頻繁出現(xiàn)的一些易錯(cuò)點(diǎn),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起看看吧。2018-03-03JavaScript 函數(shù)惰性載入的實(shí)現(xiàn)及其優(yōu)點(diǎn)介紹
惰性載入表示函數(shù)執(zhí)行的分支只會(huì)在函數(shù)第一次掉用的時(shí)候執(zhí)行,在第一次調(diào)用過(guò)程中,該函數(shù)會(huì)被覆蓋為另一個(gè)按照合適方式執(zhí)行的函數(shù),這樣任何對(duì)原函數(shù)的調(diào)用就不用再經(jīng)過(guò)執(zhí)行的分支了2013-08-08js精準(zhǔn)的倒計(jì)時(shí)函數(shù)分享
這篇文章主要為大家分享了js實(shí)現(xiàn)精準(zhǔn)的倒計(jì)時(shí)函數(shù),如何實(shí)現(xiàn)倒計(jì)時(shí)模塊,感興趣的小伙伴們可以參考一下2016-06-06最全的JavaScript開(kāi)發(fā)工具列表 總有一款適合你
最全的JavaScript開(kāi)發(fā)工具列表分享給你,總有一款適合你!2017-06-06javascript htmlencode函數(shù)(ff兼容版) 主要是編輯器中反轉(zhuǎn)html代碼
非常不錯(cuò)的htmlencode 方法,比用正則實(shí)現(xiàn)的更好,而且效率高,推薦使用第一種方法。2009-06-06