本文介绍了解决手机截图缺失问题的方法，通过html2canvas将div转换为base64图片，再利用微信小程序Canvas重绘技术，确保图片完整保存。详细步骤包括：1. 使用html2canvas转换div；2. 通过wxjssdk postMessage传递base64数据至小程序；3. 小程序接收并处理base64图片，调用writeFile写入本地；4. 最终调用保存至相册功能。
此种有缺陷，在手机上截图会有缺失，建议使用微信小程序canvas重画一份，
类似：https://blog.csdn.net/qq_17407437/article/details/104892831
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.小程序调用存入相册即可实现
扫一扫
473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
