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

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 inwebviewof the mini program. Because WeChat'sjs-sdkdoes not provide thesaveImageToPhotosAlbummethod

for morewebinteractions with mini programs, pleasesee here

Solution idea

Load WeChat firstjs-sdk

Copy after login

In three steps

1,htmlConvert the image tobase64, and then pass it to the mini program throughpostmessage

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 monitoringpostmessageGet 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 thebase64picture 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 althoughpostMessageinh5will submit the information immediately, the mini program will not accept it immediately. On the mini programwebviewThe listening function will only be triggered and receive messages at specific times: that is,postMessageall messages can only be triggered after sharing orwebview's life cycle ends. It is a message queue:

getMessage: function(e) { if (e.type === 'message' && e.detail && e.detail.data && e.detail.data.length > 0) { e.detail.data.forEach(function(dataItem) { if (dataItem.type === 'qbreport' && 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: 'aaa' } }) wx.miniProgram.navigateBack({ delta: 1 }) //注意这里. }

Copy after login

The complete code is as follows:

htmlEnd code:

webchat webview save image

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 + '/qrcode.jpeg', //这里先把文件写到临时目录里. data: img.slice(22), //注意这里 encoding: 'base64', success: res => { console.log('success') wx.saveImageToPhotosAlbum({ filePath: wx.env.USER_DATA_PATH + '/qrcode.jpeg', //这是把临时文件 保存到 相册, 收工 success: res => { wx.showToast({ title: '保存成功！' }) }, 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: '填写一个远程的图片链接', 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!