html2canvas 截图时外部图片显示空白

最新推荐文章于 2024-08-20 11:35:04 发布

小刘今天学前端了吗

最新推荐文章于 2024-08-20 11:35:04 发布

阅读量2.4k

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_43389779/article/details/128918510

版权

文章讲述了在使用html2canvas进行网页截图时遇到图片显示空白的常见问题，并提供了解决方案，即通过将图片转化为base64编码来解决跨域问题。通过axios获取图片的arraybuffer，然后转换成base64字符串，再在img标签中使用这个编码。同时，在html2canvas的配置中启用useCORS和allowTaint选项，以支持跨域和不受污染的渲染。

摘要由CSDN通过智能技术生成

问题表述

使用html2canvas进行网页截图时会发现，虽然网页中图片能够正常显示，但是图片处是空白的一片。
尝试了设置图片跨域等方法但是没有解决。

img标签设置crossOrigin属性

<img crossOrigin="anonymous" src={imgSrc} alt="img" />

解决方法

将图片转为base64代码

let imgUrl = ''
axios.get(`imageUrl`, {
	responseType: 'arraybuffer'
}).then(res => {
	const bufferUrl = btoa(new Uint8Array(res.data)
		.reduce((data, byte) => data + String.fromCharCode(byte), ''))
    imgUrl = 'data:image/png;base64,' + bufferUrl
})

在img标签中使用base64编码的图片链接

<div id="svg-container">
	<img :src="imgUrl" />
</div>

使用html2canvas工具截图

function getCanvas() {
	html2canvas(document.getElementById('svg-container'), { // 页面节点
		backgroundColor: '#fff', // 图片边框颜色
		useCORS: true, // 支持图片跨域
		allowTaint: true,
		scale: 1 // 设置放大的倍数
	}).then((canvas) => {
        let url = canvas.toDataURL("image/png")
        const blob = this.dataURLtoFile(url, 'image/jpeg')
        const filename = this.rdProductMsg.name + '.jpg'
        const file = new File([blob], filename)
        const a = document.createElement("a")
		a.download = filename || "模型图.jpg"
		const event = new MouseEvent("click")
		a.href = url
		a.dispatchEvent(event)
	})
}