vue html2canvas 截图浏览器显示网络错误下载失败

只会开发

已于 2023-08-09 17:07:23 修改

阅读量952

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript

于 2023-06-16 17:31:27 首次发布

本文链接：https://blog.csdn.net/weixin_42274795/article/details/131251057

文章讲述了在进行网页截图时遇到的问题，即保存到本地时浏览器显示网络错误导致下载失败。作者提出了解决方案，通过使用canvas将图片数据转换为Blob数据流进行下载，以应对不同浏览器的像素限制。然而，当截图内容包含地图元素时，下载速度会变慢，且html2canvas可能与某些CSS样式（如transform）冲突，建议用JavaScript替代部分CSS动态效果来优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近遇到截图功能出现保存到本地的时候，浏览器显示网络错误下载失败。无法进行截图。
这个问题是canvas保存图片到本地时各个浏览器像素的限制不同，所以将图片数据转换成 Blob 数据流下载下来就行了。

let canvas = document.createElement('canvas')
let canvasBox = document.getElementById('container')//获取截图的范围
let width = parseInt(window.getComputedStyle(canvasBox).width)
let height = parseInt(window.getComputedStyle(canvasBox).height)
canvas.width = width*2
canvas.height = height*2
canvas.style.width = width + 'px'
canvas.style.height = height + 'px'
const context = canvas.getContext('2d')
context.scale(2,2)
html2canvas(canvasBox,{allowTaint:true}).then(canvas=>{
    let name = this.getNowTime() //图片名称 时间生成
    canvas.toBlob(
        function(blob){
            const ele = document.createElement("a")
            ele.download = name + '.png'
            ele.style.display = "none"
            ele.href = URL.createObjectURL(blob)//字符内容转为blob地址
            ele.click()
        },"image/png",1
    )
})

最后发现由于下载的dom包含地图元素，下载速度很慢。

html2canvas与部分css样式存在冲突，如transform。对于一些css动态样式可考虑js实现。