Im vorherigen Artikel „Eine kurze Analyse der Interaktion zwischen WeChat-Miniprogrammen und dem Web (Code-Sharing)“ werde ich Ihnen ein Verständnis für die Interaktion zwischen WeChat-Miniprogrammen und dem Web vermitteln. Der folgende Artikel vermittelt Ihnen ein Verständnis dafür, wie Sie Bilder auf der WeChat-Applet-Seite speichern. Ich hoffe, dass er Ihnen weiterhilft.
Speichern Sie das Bild in der Webansicht des Miniprogramms. Da das js-sdk von WeChat die Methode saveImageToPhotosAlbum nicht bereitstelltwebview里保存图片。因为微信的js-sdk没有提供saveImageToPhotosAlbum方法
更多web和小程序的交互，请看这里
先加载微信js-sdk
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
1、html端把图片转为base64，然后通过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 数据
},
});
};2、小程序监听postmessage拿到图片base64数据。
// 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. 保存图片到相册（在小程序里）
因为拿到是base64图片数据，首先要把它存为图片文件。
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);
},
});getFileSystemManager的writeFile写入的base64是不包含图片的头字节的。所以要干掉data:image/jpeg;base64，等字符
有了文件路径就可以保存到相册了
wx.saveImageToPhotosAlbum({
filePath: wx.env.USER_DATA_PATH + "/qrcode.png", //这是把临时文件 保存到 相册, 收工
success: (res) => {
wx.showToast({
title: "保存成功！",
});
},
fail: (error) => {
console.log(error);
},
});文档发现虽然h5中的postMessage会马上提交信息，但是小程序并不会马上受理，在小程序webview上的监听函数，只会在特定时机触发并收到消息：也就是postMessage所有的消息都只能等得分享或webview的生命周期结束才会被触发。他是一个消息队列：
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)
}
})
}
}所以，我们在执行保存的时候可以立马触发它的返回事件。
function() {
// 此处省略
wx.miniProgram.postMessage({
data: {
xxx: 'aaa'
}
})
wx.miniProgram.navigateBack({
delta: 1
}) //注意这里.
}html
web und Miniprogrammen finden Sie hier
js-sdk. 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 = '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 数据 } }) wx.miniProgram.navigateBack({ delta: 1 }) //注意这里. } } </script>
postmessage an das Applet. Das Applet hört auf postmessage und erhält das Bild base64</. Code> Daten. <strong></strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// 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)
}
})
}
})</pre><div class="contentsignin">Nach dem Login kopieren</div></div></p><p>3. Speichern Sie das Bild im Album (im Miniprogramm) <a href="https://www.php.cn/course/list/70.html" target="_blank"></a><br/>Da Sie die Bilddaten <code>base64 erhalten, müssen Sie diese zunächst als Bilddatei speichern. 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();
}
}))postMessage in h5 die Informationen zwar sofort übermittelt, das Miniprogramm sie jedoch nicht sofort im Miniprogramm webviewakzeptiert > Die Abhörfunktion wird nur zu bestimmten Zeiten ausgelöst und empfängt Nachrichten: Das heißt, alle Nachrichten in postMessage können erst ausgelöst werden, nachdem der Lebenszyklus der Freigabe oder webview endet. . Es handelt sich um eine Nachrichtenwarteschlange: 🎜rrreee🎜🎜Also🎜, wir können ihr Rückgabeereignis sofort auslösen, wenn wir den Speichervorgang ausführen. 🎜rrreee🎜 Der vollständige Code lautet wie folgt: 🎜🎜 HTML Nebencode: 🎜rrreee🎜small Programm Nebencode: 🎜rrreee🎜oTher Related🎜🎜🎜Save Remote Pictures🎜🎜rrreee🎜Recompt: 🎜 SVG-Video-Tutorial🎜🎜🎜Das obige ist der detaillierte Inhalt vonEingehende Analyse der in WeChat-Applet-Seiten implementierten Speicherung von Bildern (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
