canvas關於getImageData跨域問題解決方法
canvas關於getImageData跨域問題解決方法
Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
最近在自學html5 CSS3很推薦李剛的 這個書<html5、css3,js權威指南>,今天在家裡測試發現 canvas中的getImageData報錯
Failed to execute 'getImageData' on 'CanvasRenderingContext2D' ,因為以前出現過一次chrome 跨域訪問json不了的問題,所以我知道是瀏覽器的配置問題 --allow-file-access-from-files就可以了,發現網上沒有答案,於是我就想為什麼我公司的可以,我每次公司用chrome都會出現一個提示瀏覽器安全效能低的提示,我就知道了,因為公司將安全效能降到最低,所以不會出現json跨域和getImageData的
問題,於是我開啟瀏覽器,果然問題這就這裡
圖片:附1
解決方法1: --disable-web-security,我們在目標中新增上這一句就可以了記得中間有一個空格,然後關上瀏覽器,重新手動開啟輸入地址,(我的是本地檔案html直接拖放進入,不要使用dw快捷F12開啟,第一次無效,我也不知道為什麼)問題解決 (具體可參照圖片附1),同時附上問題的原因:
1. 首先沒有伺服器環境(如:本地的 html網頁,操作本地的圖片),
就會報"Unable to get image data from canvas because the canvas has been tainted by cross-origin data"錯誤。
因為本地測試用的圖片是資料夾內的,js跨域限制是不能獲取非同一域名下的資料的,
而本地的位置是沒有域名的,所以瀏覽器都認為你是跨域,導致報錯。
2. 為了阻止欺騙,瀏覽器會追蹤 image data。
當把一個和canvas的域不同的圖片放到canvas上,這個canvas就成為 “tainted”(被汙染的),瀏覽器就不讓你操作該canvas 的任何畫素。
是為了阻止多種型別的XSS/CSRF攻擊(兩種典型的跨站攻擊)。
解決方法2:
將圖片轉換成為字串儲存在瀏覽器,使用時再轉換回去有興趣參考
http://blog.csdn.net/molaifeng/article/details/42293509
---------------------
作者:燻肉大餅
來源:CSDN
原文:https://blog.csdn.net/w5167839/article/details/45485645
版權宣告:本文為博主原創文章,轉載請附上博文連結!
一、問題:在使用html5的canvas是,當用到getImageData方法獲取圖片資訊時,會碰到跨域無法獲取的情況,程式碼如下:
document.getElementById("pic").onload=function(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("pic");
ctx.drawImage(img,0,0,300,300);
var imgData=ctx.getImageData(0,0,c.width,c.height); //問題所在
// 反轉顏色
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i]=255-imgData.data[i];
imgData.data[i+1]=255-imgData.data[i+1];
imgData.data[i+2]=255-imgData.data[i+2];
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,0,0);
};
在chrome會提示:
"Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
at HTMLImageElement.document.getElementById.onload"的錯誤資訊
在IE中會提示:
"security error!"的錯誤資訊
二、原因:圖片儲存在本地時,是預設沒有域名的,用getImageData方法時,瀏覽器會判定為跨域而報錯!
三、方法:1.把圖片放置在伺服器中,通過伺服器返回給客戶端,遵循同源策略;
2.用firefox瀏覽器開啟;
在firefox中效果如下: