其實(shí)這個(gè)是因?yàn)槲覀兊腸anvas在繪制的時(shí)候發(fā)現(xiàn)了不同源頭的資源，這個(gè)時(shí)候?yàn)g覽器會(huì)認(rèn)為污染了當(dāng)前canvas同時(shí)也會(huì)帶來(lái)一系列安全的問(wèn)題。
。

在"被污染"的canvas中調(diào)用以下方法將會(huì)拋出安全錯(cuò)誤：

在  的上下文上調(diào)用getImageData()
在  上調(diào)用 toBlob()
在  上調(diào)用  toDataURL()
這種機(jī)制可以避免未經(jīng)許可拉取遠(yuǎn)程網(wǎng)站信息而導(dǎo)致的用戶隱私泄露

在html2canvas中畫圖的時(shí)候，如果圖片地址和當(dāng)前頁(yè)面不同源頭的情況下，會(huì)出現(xiàn)跨域問(wèn)題，比如 圖片域名和當(dāng)前域名不同，當(dāng)前是的http,而圖片的域名是 https的協(xié)議。

這個(gè)時(shí)候 我們應(yīng)該先讓后端童鞋去配置下 允許跨域訪問(wèn)靜態(tài)資源，
然后在html2canvas繪制的時(shí)候 配置上加上
useCORS: true,

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

})

但是上線之后發(fā)現(xiàn)還是會(huì)出現(xiàn)跨域的問(wèn)題

其實(shí)這個(gè)時(shí)候我們可以通過(guò) img標(biāo)簽的一個(gè)屬性
crossorigin= anonymous
之前看網(wǎng)上說(shuō)的這個(gè)方式。還是不行。照樣還是空白的情況會(huì)發(fā)生

還有一種方式就是 直接我們吧圖片的源頭寫在這里 就可以處理
比如你的圖片的域名是 “https://demo.example.com”

我們?cè)谙螺d的圖片上直接寫

解決跨域問(wèn)題

關(guān)注我 持續(xù)更新前端知識(shí)。