快速解決Canvas.toDataURL 圖片跨域的問題
來源:易賢網 閱讀:3088 次 日期:2016-07-01 14:52:59
溫馨提示:易賢網小編為您整理了“快速解決Canvas.toDataURL 圖片跨域的問題”,方便廣大網友查閱!

出現(xiàn)Canvas.toDataURL 圖片跨域問題怎么解決呢?下面小編就為大家?guī)硪黄狢anvas.toDataURL 圖片跨域問題的快速解決方法。

如題,在將頁面的圖片地址進行本地輸出時(Html2Canvas.js),因不同源存在跨域問題,會出現(xiàn)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.】

解決方案:

根據(jù)錯誤分析需要在控制頭增加“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: * 字段,問題解決。

以上這篇快速解決Canvas.toDataURL 圖片跨域的問題就是小編分享給大家的全部內容了,希望能給大家一個參考

更多信息請查看網絡編程

2026國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯(lián)系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權所有:易賢網