微信小程式製作海報儲存到相簿發朋友圈
阿新 • • 發佈:2019-02-20
這個功能應該分三步來做:
一、製作海報圖片
二、儲存圖片到相簿
三、手動發朋友圈再到相簿中取圖片
詳細步驟:
一、製作海報
1.要製作能儲存到相簿的圖片,我們需要一個canvas標籤,在我們的wxml的最後加入canvas標籤:
<button class="shareBtns" bindtap='onSaveImg'></button>
<canvas canvas-id="myCanvas" style="position:fixed;visibily:hidden;width: 646px; height: 966px;" />
因為我需要的圖片大小是646*966的圖片,所以大家根據自己相應的需求設定大小。
2.在wxml檔案相應的js檔案中:
//先製作一個canvas標籤,再儲存成圖片 onSaveImg: function () { const ctx = wx.createCanvasContext('myCanvas'); //看回wxml裡的canvas標籤,這個的myCanvas要和標籤裡的canvas-id一致 ctx.clearRect(0, 0, 644, 966); ctx.drawImage("../../img/test1.png", 0, 0, 646, 966); ctx.drawImage("../../img/test2.png", 0, -60, 646, 966); ctx.drawImage("../../img/tipsImg" + this.data.tipsImgId + ".png", 79, 291 - 60, 492, 244); ctx.drawImage("../../img/test3.jpg", 90, 780 - 60, 135, 135); ctx.setFillStyle("#02446e"); ctx.setFontSize(26); ctx.fillText("親愛的" + this.data.testName + this.data.testId, 100, 610 - 60); ctx.setTextAlign("center"); ctx.fillText("你的有入扔有人不迷", 435, 790 - 60); ctx.setTextAlign("left"); ctx.setFillStyle("black"); ctx.setFontSize(18); ctx.fillText("我等你", 330, 825 - 60); ctx.setFontSize(22); ctx.drawImage("../../img/test4.png", 0, 936 - 60, 646, 30); var self = this; ctx.draw(true, setTimeout(function () { //為什麼要延遲100毫秒?大家測試一下 wx.canvasToTempFilePath({ x: 0, y: 0, width: 646, height: 966, destWidth: 646, destHeight: 966, canvasId: 'myCanvas', success: function (res) { self.data.savedImgUrl = res.tempFilePath; self.saveImageToPhoto(); } }) }, 100)) },
二、儲存圖片到相簿
這個功能和我的上一篇文章的功能一致,以下是這個案例的程式碼:
//儲存圖片到相簿 saveImageToPhoto: function () { if (this.data.savedImgUrl != "") { wx.saveImageToPhotosAlbum({ filePath: this.data.savedImgUrl, success: function () { wx.showModal({ title: '儲存圖片成功', content: '尋人啟事已經儲存到相簿,您可以手動分享到朋友圈!', showCancel: false }); }, fail: function (res) { console.log(res); if (res.errMsg == "saveImageToPhotosAlbum:fail cancel") { wx.showModal({ title: '儲存圖片失敗', content: '您已取消儲存圖片到相簿!', showCancel: false }); } else { wx.showModal({ title: '提示', content: '儲存圖片失敗,您可以點選確定設定獲取相簿許可權後再嘗試儲存!', complete: function (res) { console.log(res); if (res.confirm) { wx.openSetting({}) //開啟小程式設定頁面,可以設定許可權 } else { wx.showModal({ title: '儲存圖片失敗', content: '您已取消儲存圖片到相簿!', showCancel: false }); } } }); } } }) } },
三、手動發朋友圈再到相簿中取圖片
這個就不需要細說了。
總結:現在的小程式沒有發朋友圈的許可權,但是勞動人民的智慧是無窮的。所以上面的方法應該是解決這個問題比較普遍的方法了。
還有,如果大家只想發圖片到朋友圈,就只需要第二、三步就可以了。至於儲存圖片到相簿更細節的知識點,可以看我的上一篇文章。