之前的 文章 《浅析微信小程序和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视频教程
以上就是深入解析微信小程序页面中实现的保存图片(附代码)的详细内容,更多请关注其它相关文章!
总结
以上是 为你收集整理的 深入解析微信小程序页面中实现的保存图片(附代码) 全部内容,希望文章能够帮你解决 深入解析微信小程序页面中实现的保存图片(附代码) 所遇到的问题。
如果觉得 网站内容还不错, 推荐好友。
查看更多关于深入解析微信小程序页面中实现的保存图片(附代码)的详细内容...