深入解析微信小程序页面中实现的保存图片（附代码）

百变鹏仔 2个月前 (10-17) #H5教程

文章标签页面

之前的文章《浅析微信小程序和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"; //这里是图片的srcimg.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>// jsPage({    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 === &#39;message&#39; && e.detail && e.detail.data && e.detail.data.length > 0) {        e.detail.data.forEach(function(dataItem) {            if (dataItem.type === &#39;qbreport&#39; && dataItem.key) {                // todo： yourFn(dataItem.key)            }        })    }}

所以，我们在执行保存的时候可以立马触发它的返回事件。

function() {    // 此处省略    wx.miniProgram.postMessage({        data: {            xxx: &#39;aaa&#39;        }    })    wx.miniProgram.navigateBack({        delta: 1    }) //注意这里.}

完整的代码如下：

html端代码：

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 = &#39;xxxx&#39; //这里是图片的src                img.crossOrigin = &#39;anonymous&#39; //The opeartaion is insecure , 其他跨域问题自行代理解决.                img.onload = function() {                    let canvas = document.createElement(&#39;canvas&#39;)                    canvas.width = img.width                    canvas.height = img.height                    let ctx = canvas.getContext(&#39;2d&#39;)                    ctx.drawImage(this, 0, 0)                    let imgBase64Data = canvas.toDataURL(&#39;image/jpeg&#39;, 1) //这里就拿到了base64                    wx.miniProgram.postMessage({                        data: {                            imgData: imgBase64Data // 刚才拿到的base64 数据                        }                    })                    wx.miniProgram.navigateBack({                        delta: 1                    }) //注意这里.                }            }        </script>

小程序端代码：

// wxml<web - view src = "http://www.chuchur.com/save-image"bindmessage = "getMessage" > < /web-view>// jsPage({    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)            }        })    }})

其它相关

保存远程图片

  wx.showLoading({      title: "正在下载图片... ",      mask: !1  })  wx.downloadFile({  url: &#39;填写一个远程的图片链接&#39;,  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视频教程

文章推荐

深入解析微信小程序页面中实现的保存图片（附代码）

背景

解决思路

分三步

没有接收到？不是实时触发？

完整的代码如下：

其它相关

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集