微信小程序 webview 截图 保存相册
1.使用html2canvas 把div转base64格式图片
html中
import html2canvas from "html2canvas";
html2canvas(document.querySelector(".selection_1:nth-child(8)"), {
allowTaint: true,
useCORS: true,
logging: true,
foreignObjectRendering: true,
imageTimeout: 15000
}).then(canvas => {
let temp = canvas.toDataURL();
setTimeout(() => {
this.shareImg = temp;
// console.log(this.shareImg, this.$wx);
}, 3000);
});
this.$wx.miniProgram.postMessage({
data: {
imgData: this.shareImg
}
});
this.$wx.miniProgram.navigateBack({ delta: 1 });
微信小程序中
console.log(wx.env.USER_DATA_PATH, wx.getFileSystemManager)
wx.getFileSystemManager().writeFile({
filePath: wx.env.USER_DATA_PATH + '/year_app.png',
data: this.data.imageData,
encoding: 'base64',
success: res => {
console.log(res)
wx.saveImageToPhotosAlbum({
filePath: wx.env.USER_DATA_PATH + '/year_app.png',
success: res => {
wx.showToast({
title: '保存成功！'
})
},
fail: error => {
console.log(error)
}
})
},
fail: error => {
console.log(error)
}
})
（注意：）html2canvas参数的设置，img标签的图片可能会保存不下来，原因大概是图片过大的外引用图片导致的，解决办法是
把图片转为base64放在src中就可以了
2.通过wx jssdk通过postMessage把base64数据传到小程序
postMessage触发条件注意（先postMessage）在执行wx.跳转 ，销毁，分享啥的触发postMessage
3.wx小程序，获取到base64图片，调用writeFile写入数据（记得除去base64前缀 .slice(22)）成功后返回文件地址
4.小程序调用存入相册即可实现