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

66522021-08-18 18:18:57

本篇文章给大家了解一下微信小程序页面中实现的保存图片，有需要的朋友可以参考一下，希望对你们有帮助。

背景

在小程序的webview里保存图片。因为微信的js-sdk没有提供saveImageToPhotosAlbum方法

解决思路

先加载微信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"; //这里是图片的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 数据
    },
  });
};

2、小程序监听postmessage拿到图片base64数据。

// 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图片数据，首先要把它存为图片文件。

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>

小程序端代码：

// wxml
<
web - view src = "http://www.chuchur.com/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.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();
}
}))