javaScript解决手机浏览器下载为图片之后,图片漆黑无法保存的问题

pc端能正常下载图片并查看

手机移动端下载的图片全是黑色的并且无法保存,这个问题可能与移动浏览器的安全策略有关

解决办法:使用Blob对象和createObjectURL方法来创建一个临时URL,然后将其赋给链接的href属性下载:

javascript 复制代码
        // 转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);
            });
相关推荐
坚定学代码11 分钟前
static在c++中的使用
开发语言·c++
Q一件事37 分钟前
ArcGIS中TypeError: can‘t multiply sequence by non-int of type ‘str‘错误
前端·javascript·arcgis
云雀衔光1 小时前
Java Spring AI MCP:在 Spring 里把 AI 接上你的业务系统
java·开发语言·人工智能·后端·测试工具·spring
重生之小比特1 小时前
【Java SE】数据类型与变量
java·开发语言·python
Yeniden1 小时前
Java 后端从零到企业级:第1篇 Java 基础语法——变量、数据类型与运算符
java·开发语言·apache
WeiXin_DZbishe1 小时前
基于springboot大学生提问箱系统-计算机毕设【课程设计】72593
javascript·vue.js·spring boot·vscode·python·node.js·php
yume_sibai1 小时前
ES6 核心知识点完全总结(变量 + 箭头函数 + 解构 + Promise + 模块化)
前端·ecmascript·es6
luj_17681 小时前
罚球线右移破防新策略
c语言·开发语言·网络·经验分享·算法
legendary_1631 小时前
PD‑SINK芯片在无协议后端负载中的工程应用
c语言·开发语言·人工智能·智能手机·计算机外设
Nuanyt2 小时前
JVM常见核心知识梳理02 类加载 字节码技术 双亲委派 Java内存模型 JMM 并发底层 volatile synchronized 常见排障与调优工具
java·开发语言·jvm