之前的文章《浅析微信小程序和web之间的交互（代码分享）》中，给大家了解一下微信小程序和web之间的交互。下面本篇文章给大家了解一下微信小程序页面中实现的保存图片，有需要的朋友可以参考一下，希望对你们有帮助。
背景
在小程序的webview里保存图片。因为微信的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端代码：
<html>
<title>webchat webview save image</title>
<header>
<script src=https://res.wx.qq.com/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://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)
}
})
}
})
其它相关
保存远程图片
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();
}
}))
推荐学习：SVG视频教程
以上就是深入解析微信小程序页面中实现的保存图片（附代码）的详细内容，更多请关注双恒网络其它相关文章！
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 深入解析微信小程序页面中实现的保存图片（附代码）
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 深入解析微信小程序页面中实现的保存图片（附代码）
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
