日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

html2canvas 畫圖出現空白的情況,引出圖片跨域的相關問題

作者:yunchong_zhao 更新時間: 2022-04-18 編程語言

其實這個是因為我們的canvas在繪制的時候發現了不同源頭的資源,這個時候瀏覽器會認為污染了當前canvas同時也會帶來一系列安全的問題。

在"被污染"的canvas中調用以下方法將會拋出安全錯誤:

在  的上下文上調用getImageData()
在  上調用 toBlob()
在  上調用  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”

我們在下載的圖片上直接寫


解決跨域問題

關注我 持續更新前端知識。

原文鏈接:https://yunchong.blog.csdn.net/article/details/121752488

欄目分類
最近更新