解決Canvas.toDataURL 圖片跨域問題


如題,在將頁面的圖片地址進行本地輸出時(Html2Canvas.js),因不同源存在跨域問題,會出現toDataURL訪問權限問題:

Redirect at origin 'http://sub1.xx.com' has been blocked from loading by Cross-Origin Resource Sharing policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://sub2.xx.com' is therefore not allowed access.
解決方案:
根據錯誤分析需要在控制頭增加“Access-Control-Allow-Origin”,即允許訪問源文件權限,那么我們對這個頁面【注意是要輸出頁面的圖片】這樣處理:
var img = new Image;
img.onload = myLoader;
img.crossOrigin = 'anonymous';  //可選值:anonymous,*      
img.src = 'http://myurl.com/....';

或者是HTML中

<img src="" id="imgclcd" crossorigin="anonymous">

核心是請求頭中包含了 Origin: "anonymous"或"*" 字段,響應頭中就會附加上 Access-Control-Allow-Origin: * 字段,問題解決。




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM