html2canvas 画图出现空白的情况，引出图片跨域的相关问题

其实这个是因为我们的canvas在绘制的时候发现了不同源头的资源，这个时候浏览器会认为污染了当前canvas同时也会带来一系列安全的问题。
。

在"被污染"的canvas中调用以下方法将会抛出安全错误：

在 <canvas> 的上下文上调用getImageData()
在 <canvas> 上调用 toBlob()
在 <canvas> 上调用  toDataURL()
这种机制可以避免未经许可拉取远程网站信息而导致的用户隐私泄露

在html2canvas中画图的时候，如果图片地址和当前页面不同源头的情况下，会出现跨域问题，比如 图片域名和当前域名不同，当前是的http,而图片的域名是 https的协议。

这个时候 我们应该先让后端童鞋去配置下 允许跨域访问静态资源，
然后在html2canvas绘制的时候 配置上加上
useCORS: true,

html2canvas(demo, {
	useCORS: true,
	scrollY: 0,
	scrollX: 0,
	allowTaint: true
}).then(canvas => {
	let base64 = canvas.toDataURL("image/png")
	this.base64Img = base64

})

但是上线之后发现还是会出现跨域的问题

其实这个时候我们可以通过 img标签的一个属性
crossorigin= anonymous
之前看网上说的这个方式。还是不行。照样还是空白的情况会发生

还有一种方式就是 直接我们吧图片的源头写在这里 就可以处理
比如你的图片的域名是 “https://demo.example.com”

我们在下载的图片上直接写

<img src="https://demo.example.com/cdn/demo.png" crossorigin="https://demo.example.com" />

解决跨域问题

关注我 持续更新前端知识。