Fork me on GitHub

利用html2canvas直接在前端实现截图下载(解决跨域的问题)

要实现前端跨域下载 前提是你需要访问的图片服务器 已经在HTTP响应标头中添加了 Access-Control-Allow-Origin * ,否则怎么下载都是一张空白图!

html2canvas下载

html2canvas官网
或者直接使用npm命令导入
npm install --save html2canvas

html2canvas使用

js方法可以直接复制
function downLoadImg() {
            var img = document.getElementById('img3D'); // 获取要下载的图片            
            var imgsrc = img.src;
            var name = imgsrc.substring(imgsrc.lastIndexOf('\/') + 1, imgsrc.length-4);                      
            html2canvas(img, {
                width: img.clientWidth,
                height: img.clientHeight,
                allowTaint: false,
                useCORS: true,//允许跨域
            }).then(canvas => {
                let src = canvas.toDataURL('image/png', 1)
                let image = new Image()
                image.src = src
                let url = image.src.replace(/^data:image\/[^;]/, 'data:application/octet-stream')//输出类型
                let a = document.createElement('a');//随便创建一个元素
                a.download = `${name}.png`// 设置下载的文件名,默认是'下载'
                a.href = url
                document.body.appendChild(a)
                a.click()
                a.remove() // 下载之后把创建的元素删除
            });
        }
标签 (这里的)crossorigin="anonymous"也需要添加来允许跨域

<img id="img3D" src="" crossorigin="anonymous"/>

html2canvas主要是用来做截屏的 不只是图片下载 你可以将标签换成其它的Div或者整个html 用来做截屏下载。

posted @   madman98  阅读(1144)  评论(0编辑  收藏  举报
编辑推荐:
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 用 C# 插值字符串处理器写一个 sscanf
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
点击右上角即可分享
微信分享提示