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

之前的文章《浅析微信小程序和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数据。

// wXMlweb - 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 === '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>
    

小程序端代码：

// wxmlweb - 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 + '/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视频教程

以上就是深入解析微信小程序页面中实现的保存图片（附代码）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！