在h5页面使用dom-to-image将DOM元素生成的base64图片这个DOM有包含文字 背景图 和一些贴图 通过wx.saveImageToPhotosAlbum保存图片到手机 安卓和模拟器一切正常 ios手机保存到手机后 保存下来的图片无背景图 这个图片里面的图片也都不见了
这是安卓
ios
贴一下代码
onLoad(options) {
wx.getFileSystemManager().writeFile({
filePath: wx.env.USER_DATA_PATH + "/qrcode.png",
data: this.padStringToMultipleOfFour(options.base64.replace("data:image/png;base64,", "")),
encoding: "base64",
success: (res) => {
console.log(res);
wx.saveImageToPhotosAlbum({
filePath: wx.env.USER_DATA_PATH + "/qrcode.png", //这是把临时文件 保存到 相册, 收工
success: (res) => {
wx.showToast({
title: "保存成功 请打开相册查看",
icon: "none"
});
setTimeout(() => {
wx.navigateBack({
delta: 1
})
}, 1500)
},
fail: (error) => {
console.log(1, error);
wx.showToast({
title: "保存失败 请截图保存",
icon: "none"
});
setTimeout(() => {
wx.navigateBack({
delta: 1
})
}, 1500)
},
});
},
fail: (error) => {
console.log(2, error);
wx.showToast({
title: "保存失败 请截图保存",
icon: "none"
});
setTimeout(() => {
wx.navigateBack({
delta: 1
})
}, 1500)
},
});
},
/**
* 补充base64的长度 变为4的倍数 要不ios不识别
* @param {*} str
*/
padStringToMultipleOfFour(str) {
const length = str.length;
const remainder = length % 4;
if (remainder !== 0) {
const padding = 4 - remainder;
str += '='.repeat(padding);
}
return str;
},
解决了 就是dom-to-image对ios不兼容的问题 ios调用两遍toPng方法好了.. 写个回复记录一下
https://juejin.cn/post/7020340791725785119 你试过这个吗