之前的文章《浅析微信小程序和web之间的交互（代码分享）》中，给大家了解一下微信小程序和web之间的交互。下面本篇文章给大家了解一下微信小程序页面中实现的保存图片，有需要的朋友可以参考一下，希望对你们有帮助。

背景

webviewjs-sdksaveImageToPhotosAlbum

web

解决思路

js-sdk

分三步

htmlbase64postmessage

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 数据
    },
  });
};

postmessagebase64

// 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

getFileSystemManager的writeFile写入的base64是不包含图片的头字节的。所以要干掉data:image/jpeg;base64，等字符

有了文件路径就可以保存到相册了

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

h5postMessagewebviewpostMessagewebview

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

    

        下载图片
        
    

小程序端代码：

其它相关

保存远程图片

  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视频教程