DOM Exception 18 getImageData

我遇到了很多人似乎在過去得到的錯誤，但解釋並不清楚。在javascript中使用.getImageData（）方法獲取我存儲在我的計算機上的圖片的像素數據並將其輸入到我的HTML網頁中的img標記中後，我收到SecurityError：DOM異常18.DOM Exception 18 getImageData

I我只是在瀏覽器中運行一個HTMl文件，它阻止了我完成這些東西。我已經閱讀過有關製作代理來繞過它或在我自己的域中託管映像的信息。我不完全明白這意味着什麼或如何去做。所以，如果有人能夠提供幫助，我將不勝感激。我會在這裏輸入我的代碼，並留下鏈接到圖像。

http://i.imgur.com/8UzWlWX.png

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
    <title>Test</title> 

    <script> 
     function putimg() { 

      var img = document.getElementById('img'); 
      var can = document.getElementById('C'); 
      var ctx = can.getContext('2d'); 
      ctx.drawImage(img, 0, 0); 


      var position = []; 
      var imgdata = ctx.getImageData(0,0, img.width, img.height); 
      var data = imgdata.data; 
      for (var i = 0; i < data.length; i += 4) { 
       if (data[i] == 255) { 
        var vertical = Math.floor((data.indexOf(data[i])/4)/400); 
        var horizontal = Math.floor((data.indexOf(data[i])/4) % 400); 

        position.push(horizontal, vertical); 
       } 
      } 

      } 

      ctx.putImageData(imgdata, 0, 0); 
     } 
     </script> 
</head> 

<body onload="putimg()"> 
    <h1>Test</h1> 

    <img id="img" src="circle-image-alone.png" style="display:none"></img> 
    <canvas id="C" width="600" height="600"></canvas> 

</body> 
</html>

編輯：現在的文件是在同一文件夾中的HTML文件，但同樣的錯誤標誌出現

來源

2013-07-23 user2517142

的問題是，這是打破Same-origin policy。您需要讓imgur放寬他們的跨域分享或自己託管圖片。

如果直接從您的計算機上的文件系統中運行的HTML文件，然後你可以將圖像只需下載到同一文件夾作爲HTML文件中，並引用它像

<img id="img" src="8UzWlWX.png" style="display:none"></img>

下面是你需要跳過的環路，使其通過像imgur這樣的外國來源工作：https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

來源

2013-07-23 16:56:03 Esailija

我從已經發送到我的電子郵件的照片。然後我將文件下載到我的電腦。但是，這仍然給我錯誤信息。 – user2517142

@ user2517142噢，抱歉似乎直接使用HTML文件與文件系統不能做到這一點。您需要在您的計算機上本地託管服務器，並像訪問真實網站一樣訪問它。嗯，我覺得有一些標誌谷歌瀏覽器放寬這雖然http://stackoverflow.com/q/4270999/995876 – Esailija

正如你發現的，你的瀏覽器甚至認爲你的本地文件系統是一個不同的域。

所以你仍然違反跨域即使你的圖像和.html是在同一個本地目錄。

您需要一個CORS兼容的方式來加載您的圖像。

方法如下：

打開上dropbox.com帳戶和託管你的形象出現。

一定要將您的圖片放在他們爲您設置的「公共」文件夾中。

它們允許從「公共」文件夾跨域下載其圖像。

爲了讓您的保管箱圖像的URL：

右鍵單擊您的公共文件夾中的圖片並選擇「複製公開鏈接」。

這將使網址到剪貼板，你可以將其粘貼到你的代碼。

然後使用此代碼下載圖像到瀏覽器的CORS兼容的方式：

// download an image from dropbox.com 
// in a CORS compliant way 

var img=new Image(); 
img.onload=function(){ 
    ctx.drawImage(img, 0, 0); 
} 
img.crossOrigin="anonymous"; 
img.src="dropbox.com/yourDropboxAccount/yourImage.png";

結果是一個形象，你可以充分檢驗/變更/保存：

CTX。getImageData
ctx.putImageData
ctx.toDataURL。

來源

2013-07-23 17:45:11 markE

DOM Exception 18 getImageData

回答

相關問題