자바 스크립트에서 이미지를 RGB 배열로 변환

Javascript의 PNG 또는 BMP 이미지에서 픽셀 배열을 가져올 수 있습니까? 픽셀 배열을 조작하고 캔버스에 수정 된 이미지를 그릴 수 있도록 이미지에서 RGB 배열을 얻고 싶습니다. 자바 스크립트에서 이미지를 RGB 배열로 변환

UPDATE

: how to get the RGB value of an image in a page using javascript?

그러나, 대답이 실제로이 문제를 해결하는 방법에 대한 많은 세부로 이동하지 않습니다 나는 여기에 정확한 중복을 발견했다.

출처

2012-05-06 Anderson Green

해당 질문에 대한 대답의 링크를 클릭하면 이미지의 각 픽셀의 색상을 반전시키는 방법에 대한 자세한 대답이 표시됩니다. 이 코드를 픽셀 배열을 저장하는 것으로 변환하는 것은 간단합니다. – JaredMcAteer

https://developer.mozilla.org/en/Canvas_tutorial –

[자바 스크립트를 사용하여 페이지의 이미지 RGB 값을 얻는 방법]을 (를) 참조하십시오. (http://stackoverflow.com/questions/2754865/how 이미지를 페이지에서 사용하는 자바 스크립트를 사용하여 얻을 수있는 가치) –

캔버스의 RGBA 값을 가져 오는 HTML 캔버스 imageData을 사용하는 방법에 대해 인터넷에 100 개의 자습서가 있습니다. canvas imageData를 검색하면 많은 정보를 찾을 수 있습니다.

당신이 할 수있는 일은 다음과 같습니다

ctx.drawImage(img, 0, 0); 
var imgData = ctx.getImageData(x, y, width, height).data;

imgData 지금은 매 4 곳이 각 픽셀있는 배열입니다. 따라서 [0][1][2][3]은 첫 번째 픽셀의 [r][g][b][a]입니다.

출처

2012-05-07 01:06:55

"img"의 매개 변수 유형은 무엇이되어야합니까? 그것은 이미지 객체인가, 아니면 이미지 URL이 문자열이어야 하는가? –

@AndersonGreen Image 객체의 인스턴스 인 DOM 중 하나를 통해 가져올 수 있습니다. 다음을 사용하여 새 인스턴스를 만들 수 있습니다.'var img = new Image(); img.src = "http : // ..."또는 img.src = "data : image/jpeg; base64, ...." – Mustafa

XHTML의 하위 집합을 실행 중이므로

자바 스크립트에서 이미지를 RGB 배열로 변환

답변

관련 문제