WeChat applet saves pictures and shares them with friends

一,Save pictures

WeChat small programs use more sharing functions, basically will be used, especially for QR code pictures, save in Local or share the applet to a friend, so I have already told you how to use it in the api provided by WeChat applet. Let's share it.
First, the image address is obtained by requesting the backend interface. Of course, the address can be directly written without a request.

wx.request({
        Url: getApp().data.serviceUrl +'/wechat/searchdata/proqrcode', // request address
        Data: {//Data sent to the background
          Openid: that.data.openid
        },
        Header: {// request header
          "Content-Type": "application/json;charset=UTF-8;"
        },
        Method: "POST", //get is the default method / POST

        Success: function (res) {

          Var imageurl = res.data.content

          that.setData({
            shareImgSrc: getApp().data.qrServiceUrl + imageurl
          })
          wx.getImageInfo({

            Src: that.data.shareImgSrc, / / ​​small code address with parameters returned by the server
            Success: function (res) {
              //res.path is the local address of the network image
              Var qrCodePath = res.path;
              //2. Canvas draw text and images
              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) {
              //Failed callback
            }
          });
        },
        Fail: function (err) { }, / / ​​request failed
      })


After the above step, the picture has been displayed, and the next step is to save the picture. Here is achieved by button click:

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. Save the image to the album
        wx.saveImageToPhotosAlbum({
          filePath: that.data.saveImgSrc,
          Success(res) {
            wx.showModal({
              Title: 'Save the map successfully',
              Content: 'The picture was successfully saved to the album, go to the ring thiophene~',
              showCancel: false,
              confirmText: '好哒',
              confirmColor: '#72B9C3',
              Success: function (res) {
                If (res.confirm) {
                  Console.log('User clicks OK');
                }
                // that.hideShareImg()
              }
            })
          }
        })
    }, 

二, share the small program

分享小程序 needs to set the open-type in the button, as follows

<button class='sendfriend' bindtap = 'sendfriend' open-type="share ">Send to WeChat friends</button>

to send to friends via onShareAppMessage method:

onShareAppMessage: function (ops) {
      If (ops.from === 'button') {
        // from the in-page forwarding button
        Console.log(ops.target)
      }
      Var that = this
      Return {
        Title: 'Share to friends',
         Path: 'pages/index/index?scene='+that.data.openid,//Click to share the message is the open page
        imageUrl: that.data.saveImgSrc,
        Success: function (res) {
          // Forwarded successfully
          Console.log("forward success:" + JSON.stringify(res));
          Var shareTickets = res.shareTickets;

        },
        Fail: function (res) {
          // forwarding failed
          Console.log("Forwarding failed:" + JSON.stringify(res));
        }
      }
    },