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

问题表述

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

1. img标签设置crossOrigin属性

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

解决方法

1. 将图片转为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
})

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

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

3. 使用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)
	})
}