pc端能正常下载图片并查看
手机移动端下载的图片全是黑色的并且无法保存,这个问题可能与移动浏览器的安全策略有关
解决办法:使用Blob
对象和createObjectURL
方法来创建一个临时URL,然后将其赋给链接的href
属性下载:
// 转blob函数
function dataURLtoBlob(dataURL) {
var arr = dataURL.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
// 使用html2canvas将 HTML 元素转换为 Canvas
html2canvas(document.getElementById("myElementId"), {
useCORS: true
}).then(canvas => {
// 获取Canvas的图像数据
const imgData = canvas.toDataURL('image/png');
const blob = dataURLtoBlob(imgData);
// 创建一个链接元素
var a = document.createElement('a');
// 将数据URL设置为链接的href属性
a.href = window.URL.createObjectURL(blob);
// 设置下载的文件名
a.download = '参观留念.png';
// 模拟点击这个链接,触发下载
a.click();
// 释放Blob URL
window.URL.revokeObjectURL(a.href);
});