之前的 文章 《浅析微信小程序和web之间的交互（代码分享）》中，给大家 了解 一下微信小程序和web之间的交互。下面本篇文章给大家了解一下微信小程序页面中实现的保存图片， 有需要的朋友可以参考一下 ，希望对 你们 有帮助。
背景
在小程序的 webview 里保存图片。因为微信的 js-sdk 没有提供 sav ei mageToPhotosAlbum 方法
更多 web 和小程序的交互，请看这里
解决思路
先加载微信 js -s dk
<script src="https://res.wx. QQ .COM /o PE n/js/jweixin-1.6.0.js"></script>
分三步
1、 ht ML 端把图片转为 base64 ，然后通过 postmessage 传递给小程序
let img = new Image();
img.src = "xxxx"; //这里是图片的src
img.crossOri gin = "anonymous"; //The opeart ai on 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.mini PR ogr am .postMessage({
data: {
imgData: imgBase64Data, // 刚才拿到的base64 数据
},
});
};2、小程序监听 postmessage 拿到图片 base64 数据。
// w XM l
<
web - view src = "http://HdhCmsTestchuchur测试数据/save -i mage"
bindmessage = "getMessage" > < /web-view>
// js
Page({
data: {
imageData: null
}
getMessage(e) {
this.setData({
imageData: e.detail.data[0].imgData
})
}
})3. 保存图片到相册（在小程序里）
因为拿到是 base64 图片数据，首先要把它存为图片文件。
wx.getFile Sys temManager().wr IT eFile({
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 === & # 39 ;m essage' && e.detail &am p; & e.detail.data && e.detail.data.length > 0) {
e.detail.data.for each (function(dataItem) {
if (dataItem.type == = 'q br eport' && dataItem.key) {
// todo： yourFn(dataItem.key)
}
})
}
}所以 ，我们在执行保存的时候可以立马触发它的返回事件。
function() {
// 此处省略
wx.miniProgram.postMessage({
data: {
xxx: 'aaa'
}
})
wx.miniProgram. navigate Back({
delta: 1
}) //注意这里.
}完整的代码如下：
html 端代码：
<html>
<title>webc hat webview save image</title>
<header>
<script src="https://res.wx.qq测试数据/open/js/jweixin-1.6.0.js"></script>
</hearder>
<body>
<button id="saveImage" onclick="saveImage">下载图片</button>
<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>
</body>
</html>小程序端代码：
// wxml
<
web - view src = "http://HdhCmsTestchuchur测试数据/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)
}
})
}
})其它相关
保存远程图片
wx.showLoading({
title: "正在下载图片 .. . ",
mask: !1
})
wx.downloa DF ile({
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();
}
}))推荐学习：SVG视频教程
以上就是深入解析微信小程序页面中实现的保存图片（附代码）的详细内容，更多请关注其它相关文章！
总结
以上是 为你收集整理的 深入解析微信小程序页面中实现的保存图片（附代码） 全部内容，希望文章能够帮你解决 深入解析微信小程序页面中实现的保存图片（附代码） 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于深入解析微信小程序页面中实现的保存图片（附代码）的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did204471