In-depth analysis of saving images implemented in WeChat applet pages (with code)-H5 Tutorial-php.cn

In-depth analysis of saving images implemented in WeChat applet pages (with code)

奋力向前

Release： 2021-08-18 09:48:08

forward

5216 people have browsed it

In the previous article "A brief analysis of the interaction between WeChat mini programs and the web (code sharing)", I will give you an understanding of the interaction between WeChat mini programs and the web. The following article will give you an understanding of how to save images on the WeChat applet page. Friends in need can refer to it. I hope it will be helpful to you.

In-depth analysis of saving images implemented in WeChat applet pages (with code)

Background

Save the picture in webview of the mini program. Because WeChat's js-sdk does not provide the saveImageToPhotosAlbum method

for more web interactions with mini programs, pleasesee here

Solution idea

Load WeChat firstjs-sdk

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

Copy after login

In three steps

1,htmlConvert the image to base64, and then pass it to the mini program through postmessage

let img = new Image();
img.src = "xxxx"; //这里是图片的src
img.crossOrigin = "anonymous"; //The opeartaion is insecure . 其它跨域的问题 自行代理解决
img.onload = function () {
  let canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  let ctx = canvas.getContext("2d");
  ctx.drawImage(this, 0, 0);
  let imgBase64Data = canvas.toDataURL("image/jpeg", 1); //这里就拿到了base64
  wx.miniProgram.postMessage({
    data: {
      imgData: imgBase64Data, // 刚才拿到的base64 数据
    },
  });
};

Copy after login

2. Mini program monitoring postmessageGet the imagebase64data.

// wxml
<
web - view src = "http://www.chuchur.com/save-image"
bindmessage = "getMessage" > < /web-view>

// js
Page({
    data: {
        imageData: null
    }
    getMessage(e) {
        this.setData({
            imageData: e.detail.data[0].imgData
        })
    }
})

Copy after login

3. Save the picture to the album (in the mini program)

Because the base64 picture data is obtained, you must first Save it as an image file.

wx.getFileSystemManager().writeFile({
  filePath: wx.env.USER_DATA_PATH + "/qrcode.png", //这里先把文件写到临时目录里.
  data: this.data.imageData.slice(22), // 注意这里
  encoding: "base64",
  success: (res) => {
    console.log("success");
  },
  fail: (error) => {
    console.log(error);
  },
});

Copy after login

The base64 written by getFileSystemManager's writeFile does not contain the header byte of the image. So we need to get rid of data:image/jpeg;base64, and wait for the characters

Once we have the file path, we can save it to the album

wx.saveImageToPhotosAlbum({
  filePath: wx.env.USER_DATA_PATH + "/qrcode.png", //这是把临时文件 保存到 相册, 收工
  success: (res) => {
    wx.showToast({
      title: "保存成功！",
    });
  },
  fail: (error) => {
    console.log(error);
  },
});

Copy after login

Didn’t receive it? Not triggered in real time?

The document found that although postMessage in h5 will submit the information immediately, the mini program will not accept it immediately. On the mini program webview The listening function will only be triggered and receive messages at specific times: that is, postMessageall messages can only be triggered after sharing or webview's life cycle ends. It is a message queue:

getMessage: function(e) {
    if (e.type === &#39;message&#39; && e.detail && e.detail.data && e.detail.data.length > 0) {
        e.detail.data.forEach(function(dataItem) {
            if (dataItem.type === &#39;qbreport&#39; && dataItem.key) {
                // todo： yourFn(dataItem.key)
            }
        })
    }

}

Copy after login

So, we can trigger its return event immediately when executing the save.

function() {
    // 此处省略
    wx.miniProgram.postMessage({
        data: {
            xxx: &#39;aaa&#39;
        }
    })
    wx.miniProgram.navigateBack({
        delta: 1
    }) //注意这里.
}

Copy after login

The complete code is as follows:

htmlEnd code:


webchat webview save image


    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    

    
        
        <script>
            function saveImage() {
                let img = new Image()
                img.src = &#39;xxxx&#39; //这里是图片的src
                img.crossOrigin = &#39;anonymous&#39; //The opeartaion is insecure , 其他跨域问题自行代理解决.
                img.onload = function() {
                    let canvas = document.createElement(&#39;canvas&#39;)
                    canvas.width = img.width
                    canvas.height = img.height
                    let ctx = canvas.getContext(&#39;2d&#39;)
                    ctx.drawImage(this, 0, 0)
                    let imgBase64Data = canvas.toDataURL(&#39;image/jpeg&#39;, 1) //这里就拿到了base64

                    wx.miniProgram.postMessage({
                        data: {
                            imgData: imgBase64Data // 刚才拿到的base64 数据
                        }
                    })

                    wx.miniProgram.navigateBack({
                        delta: 1
                    }) //注意这里.
                }
            }
        </script>

Copy after login

Small terminal code:

// wxml
<
web - view src = "http://www.chuchur.com/save-image"
bindmessage = "getMessage" > < /web-view>

// js
Page({

    getMessage(e) {

        let img = e.detail.data[0].imgData

        wx.getFileSystemManager().writeFile({
            filePath: wx.env.USER_DATA_PATH + &#39;/qrcode.jpeg&#39;, //这里先把文件写到临时目录里.
            data: img.slice(22), //注意这里
            encoding: &#39;base64&#39;,
            success: res => {
                console.log(&#39;success&#39;)
                wx.saveImageToPhotosAlbum({
                    filePath: wx.env.USER_DATA_PATH + &#39;/qrcode.jpeg&#39;, //这是把临时文件 保存到 相册, 收工
                    success: res => {
                        wx.showToast({
                            title: &#39;保存成功！&#39;
                        })
                    },
                    fail: error => {
                        console.log(error)
                    }
                })
            },
            fail: error => {
                console.log(error)
            }
        })
    }
})

Copy after login

Other related

Save remote pictures

  wx.showLoading({
      title: "正在下载图片... ",
      mask: !1
  })

  wx.downloadFile({
  url: &#39;填写一个远程的图片链接&#39;,
  success: function(t) {

      wx.showLoading({
          title: "正在保存图片",
          mask: !1
      })
      wx.saveImageToPhotosAlbum({
          filePath: t.tempFilePath,
          success: function() {
              wx.showModal({
                  title: "自定义提示信息",
                  content: "保存成功",
                  showCancel: !1
              });
          },
          fail: function(t) {
              wx.showModal({
                  title: "图片保存失败",
                  content: t.errMsg,
                  showCancel: !1
              });
          },
          complete: function(t) {
              wx.hideLoading();
          }
      });

  },
  fail: function(t) {
      wx.showModal({
          title: "图片下载失败",
          content: t.errMsg,
          showCancel: !1
      });
  },
  complete: function(t) {
      wx.hideLoading();
  }
  }))

Copy after login

Recommended learning: SVG video tutorial

The above is the detailed content of In-depth analysis of saving images implemented in WeChat applet pages (with code). For more information, please follow other related articles on the PHP Chinese website!