微信小程式儲存圖片以及分享給朋友
阿新 • • 發佈:2018-12-10
一、儲存圖片
微信小程式中使用得比較多的就是分享功能,基本上都會用到,尤其是對二維碼圖片,儲存在本地或者將小程式分享給朋友,好在微信小程式提供的api中已經告訴了該怎麼使用,下面就將所用到的分享出來。
首先是通過請求後端介面獲取圖片地址,當然也可以不用請求直接將地址寫死。
wx.request({ url: getApp().data.serviceUrl +'/wechat/searchdata/proqrcode',//請求地址 data: {//傳送給後臺的資料 openid: that.data.openid }, header: {//請求頭 "Content-Type": "application/json;charset=UTF-8;" }, method: "POST",//get為預設方法/POST success: function (res) { var imageurl = res.data.content that.setData({ shareImgSrc: getApp().data.qrServiceUrl + imageurl }) wx.getImageInfo({ src: that.data.shareImgSrc,//伺服器返回的帶引數的小程式碼地址 success: function (res) { //res.path是網路圖片的本地地址 var qrCodePath = res.path; //2. canvas繪製文字和圖片 const ctx = wx.createCanvasContext('myCanvas'); // var imgPath = that.data.localImageUrl; ctx.drawImage(qrCodePath, 0, 0, 200, 200); ctx.setFillStyle('white') ctx.fillRect(0, 520, 600, 280); ctx.draw() // that.setData({ // localImageUrl: qrCodePath // }) }, fail: function (res) { //失敗回撥 } }); }, fail: function (err) { },//請求失敗 })
經過上面一步已經圖片展示出來了,接下來是將圖片儲存下來。這裡通過按鈕點選實現:
savedate: function (e) { var that = this; wx.canvasToTempFilePath({ x: 0, y: 0, width: 200, height: 200, destWidth: 400, destHeight: 400, canvasId: 'myCanvas', success: function (res) { that.setData({ saveImgSrc: res.tempFilePath }) }, fail: function (res) { console.log(res) } }) //4. 將圖片儲存到相簿 wx.saveImageToPhotosAlbum({ filePath: that.data.saveImgSrc, success(res) { wx.showModal({ title: '存圖成功', content: '圖片成功儲存到相簿了,去髮圈噻~', showCancel: false, confirmText: '好噠', confirmColor: '#72B9C3', success: function (res) { if (res.confirm) { console.log('使用者點選確定'); } // that.hideShareImg() } }) } }) },
二、分享小程式
分享小程式需要在button中設定open-type,如下
<button class='sendfriend' bindtap = 'sendfriend' open-type="share">傳送給微信好友</button>
通過onShareAppMessage方法實現傳送給好友:
onShareAppMessage: function (ops) { if (ops.from === 'button') { // 來自頁面內轉發按鈕 console.log(ops.target) } var that = this return { title: '分享給好友', path: 'pages/index/index?scene='+that.data.openid,//點選分享訊息是開啟的頁面 imageUrl: that.data.saveImgSrc, success: function (res) { // 轉發成功 console.log("轉發成功:" + JSON.stringify(res)); var shareTickets = res.shareTickets; }, fail: function (res) { // 轉發失敗 console.log("轉發失敗:" + JSON.stringify(res)); } } },