자바 스크립트를 사용하여 비트 맵의 ​​픽셀을 가져옵니다.

Question

내 자신의 페이지에 대한 greasemonkey 자바 스크립트 코드를 작성하려고합니다. 이 페이지에는 ID "바코드"가있는 img가 있습니다.

나는

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

를 사용하고 페이지에서 이미지를 얻을. 내가 원하는 것은이 이미지의 모든 픽셀을 배열로 가져올 수 있기를 원한다는 것입니다.

나는 stackoverflow에서 돌아 다니며이 작업을 수행하는 몇 가지 방법을 보았습니다. 나 또한 픽시 스틱을 보았다. stackoverflow 솔루션의 내 문제는 그 것입니다.

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이 인쇄되면 작동한다는 것을 의미합니다. 그렇지 않으면 작동하지 않습니다.

아무도 도와 줄 수 있습니까? 고맙습니다.

Answer 1

<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으로 전화 할 수 있습니다.