1. 程式人生 > >微信小程式儲存圖片以及分享給朋友

微信小程式儲存圖片以及分享給朋友

一、儲存圖片

   微信小程式中使用得比較多的就是分享功能,基本上都會用到,尤其是對二維碼圖片,儲存在本地或者將小程式分享給朋友,好在微信小程式提供的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));
        }
      }
    },