使用javascript獲取位圖像素

我正在嘗試爲特定的自己的頁面編寫一個greasemonkey javascript代碼。在頁面中，有一個帶有「條形碼」標識的img。使用javascript獲取位圖像素

我可以使用

var imageattributes = document.getElementById('barcode');

，並從頁面獲取圖像。我想要的是我希望能夠在數組中獲取此圖像中的所有像素。

我一直在使用stackoverflow，並看到了一些方法來做到這一點。我也看到了pixastic。我與在計算器中的解決方案的問題是，

var imgData = context.getImageData(0, 0, canvas.height, canvas.width);

不起作用。不管我做什麼。 pixastic並不顯示如何查看任何地方的像素信息。他們的文檔只涵蓋的功能，他們已經爲反轉，模糊等

我目前擁有的代碼是這樣的：

var imageattributes = document.getElementById('barcode').attributes; 
var imageurl = imageattributes.getNamedItem("src").value; 
var imageurl2 = imageurl.replace("..","http://localhost"); 

var img = new Image(); 
img.src = imageurl2; 
context.drawImage(img, 0, 0); 
var imgData = context.getImageData(0, 0, canvas.height, canvas.width); 
var pixel = new Array(); 
for(i=0;i<canvas.height;i++){ 
    pixel[i] = new Array(); 
    for(j=0;j<canvas.width;j++){ 
     pixel[i][j] = imgData.data[i*canvas.width+j*4]; 
    } 
} 
document.getElementById('derp').innerHTML = imageurl;

這是應該得到的圖像，把它的SRC，將其加載爲一個新的圖像，並把像素放入一個數組中。最後一行是顯示在屏幕上，如果代碼已經工作或沒有，所以如果URL打印，這意味着它的工作，如果沒有，它不。

任何人都可以幫助我嗎？謝謝。

來源

2012-06-01 Umut Kaya İlkiz

「getImageData」不工作的方式是什麼？它是否會拋出錯誤或返回null或其他東西？ – apsillers

@apillers我無法看到錯誤或正在發生的事情。我剛剛刪除了所有內容，並逐行編寫代碼，檢查最後一行是否工作並在網頁上寫入內容。當我來到那條線時，它停止工作。 –

你可以做一個'console.log'並在你的控制檯中查看結果嗎？結果是什麼？ imgData.data是否填充？ – apsillers

您沒有（或未使用）<canvas>元素。你的HTML應該是這個樣子：

<img id="barcode" src="whatever.bmp"> 
<canvas id="mycanvas"> 
    <div id="fallback"> 
     You only see this message if your browser doesn't support canvas. 
    </div> 
<canvas>

和你的功能應該與前綴：

var context = document.getElementById('mycanvas').getContext('2d');

這應該使你的代碼正常工作。您需要首先獲取<canvas>元素的繪圖上下文，然後將圖像添加到該上下文，最後從上下文中檢索像素數據。

直接解決您的評論上述情況，行

var context = document.getElementById('barcode').getContext('2d');

試圖讓圖像元素的背景，但這是不可能的。您只能在畫布元素上調用getContext。

來源

2012-06-01 22:52:28 apsillers

這很好用：D謝謝！儘管我不得不將canvas.height和canvas.width編輯爲其他東西，但它仍然有效。謝謝。 –

使用javascript獲取位圖像素

回答

相關問題