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.
Save the picture inwebview
of the mini program. Because WeChat'sjs-sdk
does not provide thesaveImageToPhotosAlbum
method
for moreweb
interactions with mini programs, pleasesee here
Load WeChat firstjs-sdk
1,html
Convert 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 数据 }, }); };
2. Mini program monitoringpostmessage
Get the imagebase64
data.
// 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 }) } })
3. Save the picture to the album (in the mini program)
Because thebase64
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); }, });
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); }, });
The document found that althoughpostMessage
inh5
will submit the information immediately, the mini program will not accept it immediately. On the mini programwebview
The listening function will only be triggered and receive messages at specific times: that is,postMessage
all 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) } }) } }
So, we can trigger its return event immediately when executing the save.
function() { // 此处省略 wx.miniProgram.postMessage({ data: { xxx: 'aaa' } }) wx.miniProgram.navigateBack({ delta: 1 }) //注意这里. }
html
End code:
webchat webview save image
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) } }) } })
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(); } }))
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!