小白必看！微信小程序VS网页存图大揭秘，快来get操作技巧

朋友们，别着急，咱们来聊聊微信小程序和网页是怎么玩耍的！

咱们来聊聊关于微信小程序里如何保存图片的话题。感兴趣吗？别急，接下来我会跟你详细说说，相信会对你有所帮助的！

好，别烦恼，想知道怎么在微信网页版小程序里存照片吗？即使微信那啥 JS-SDK 没给我们提供 saveImageToPhotosAlbum 的方法，但是哥们这就给你支几招小小妙招。

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

想知道怎么保存微信小程序里的图片？有点难度！别着急我告诉你怎么操作。

// wxml
 
// js
Page({
    data: {
        imageData: null
    }
    getMessage(e) {
        this.setData({
            imageData: e.detail.data[0].imgData
        })
    }
})

首先，咱们要先把图片变成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);
  },
});

搞定！接下来就交给小程序去监听那些消息，再把那些图片的 base64 代码挖出来。这个过程可能会有点棘手，但咱们齐心协力肯定没问题！

搞定！接下来咱们得把下载好的base64图片弄到手机相册里面去。看似简单，做起来可能费点劲儿别担心，跟着步骤慢慢来，保证没问题！

wx.saveImageToPhotosAlbum({
  filePath: wx.env.USER_DATA_PATH + "/qrcode.png", //这是把临时文件 保存到 相册, 收工
  success: (res) => {
    wx.showToast({
      title: "保存成功！",
    });
  },
  fail: (error) => {
    console.log(error);
  },
});

搞好了，现在可以在微信小程序里面方便地存储图片了！老铁们，你们会了吗？记得留言告诉我，分享出去就对了！爱看这个文章的别忘了关注我，你们的鼓励是我最大动力！欢迎分享，不论你在何处，我都会等在这儿！