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 元素转换为 Canvashtml2canvas(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 URLwindow.URL.revokeObjectURL(a.href);});