html2canvas
截图方法:
const downloadImage1 = () => {
// 获取要转换的元素
const imgDom = document.getElementById('Screen1')
// imgDom.domain = ''
let a = document.createElement('a')
html2canvas(imgDom, {
useCORS: true, // 开启跨域设置,需要后台设置cors
dpi: 150,
scale: 2,
allowTaint: true, // 允许跨域图片
background: '#001426',
}).then((canvas) => {
console.log(canvas)
let blob = dataURLToBlob(canvas.toDataURL('image/png'))
setTimeout(() => {
a.setAttribute('href', URL.createObjectURL(blob))
a.setAttribute('download', `${name}.png`)
a.click()
URL.revokeObjectURL(blob)
}, 3000)
})
}
- 截图成功但背景色为白色的
html
部分
项目截图:
代码截图:id: Screen1
获取的html
部分是没有body
的背景图的,但html2canvas
背景色似乎并没有生效。
4X3~UY.png" title="5@WHZYA2OLZB%C$
4X
3~UY.png"> 截图成功
iframe
的html
部分<iframe ref="iframe" :src="url" scrolling="auto" width="100%" height="100%" frameborder="0" :key="url" id="Screen1" ></iframe>
项目截图:
代码截图:一片空白