이미지에서 픽셀 색상 가져 오기

이미지가 회전되었는지 여부에 관계없이 이미지 색상의 왼쪽 위 픽셀 (좌표 : 0,0)을 가져 오려고합니다.

어떻게하면 JavaScript 또는 PHP 코드를 사용하여이를 수행 할 수 있습니까?

2013-07-22 Eitan

가능한 속는, 자바 스크립트의 화상으로부터, 화소 (X, Y)를 얻는 방법 : http://stackoverflow.com/questions/8751020/how-to-get-a-pixels-color -of-an-image –

PHP 솔루션의 경우 [PHP를 사용하여 이미지의 첫 번째 픽셀 가져 오기] (http://stackoverflow.com/questions/14178182/get-the-first-pixel-from-the-image- using-php). 이미지가 아닌 렌더링 된 페이지의 이미지를 원한다면 도움이되지는 않겠지 만. 렌더링 된 페이지의 픽셀 색상을 얻는 방법은 [JavaScript 스포이드 (마우스 커서 아래에서 픽셀의 색상 지정)]에서 허용되는 답변을 참조하십시오 (http://stackoverflow.com/questions/1936021/javascript-eyedropper-tell-color-of -pixel-under-mouse-cursor). – user

가능한 [픽셀의 x, y 좌표 색상을 이미지에서 가져 오는 방법?] (https://stackoverflow.com/questions/8751020/how-to-get-a-pixels-xy-coordinate-color-from) -an-image) –

캔버스 document.createElement
만들기 2D 컨텍스트 canvas.getContext('2d')
캔버스에 이미지를 그립니다 받기 context.drawImage(image, x, y)
- 확인 이미지가 같은 도메인 또는 당신은 액세스 할 수 없습니다 그 화소
이미지 context.getImageData(x1, y1, x2, y2)
- 당신은 배열이 r, g, b 및 a 값을 가질 것이다
  - data 필드 (context.getImageData(0,0,1,1).data)의 그렇게 context.getImageData(0, 0, 1, 1)
- getImageData의 결과는 픽셀의 배열을해야합니다 단지 왼쪽 상단을 원한다.

출처

2013-07-22 13:47:24

고맙습니다. 나는 당신이 매우 빠른 대답에 대한 보상을 받아야한다고 생각합니다. 브라우저가 html5를 지원하지 않는 경우 어떻게됩니까? PHP 코드에는 어떤 해결책이 있습니까? – Eitan

@Eitan - 캔버스에 대한 지원이없는 경우 서버 측 코드를 사용하여 픽셀 데이터를 가져 오거나 처리하기 위해 Flash/Silverlight 가증 행위를 사용하려면 서버에 이미지 (AJAX 요청 포함)를 전달해야합니다. –

주의 할 점 : drawImage로 렌더링 된 픽셀 값은 색 공간 보정으로 인해 이미지의 값과 다를 수 있습니다.이미지에 색 공간 정보가 포함 된 경우에만이 작업이 수행됩니다. – ironic

브라우저에서 이미지를 사용하려면 먼저 이미지를 서버로 전송할 수 있어야 PHP를 사용할 수 있습니다. 당신이 canvas의 이미지를 그릴 수 있다면

N 브라우저, 당신은 getImageData() 방법을 사용할 수 있습니다

var myImg = new Image(); 
myImg.src = 'image.jpg'; 
var context = document.getElementById('canvas').getContext('2d'); 
context.drawImage(myImg, 0, 0); 
data = context.getImageData(x, y, 1, 1).data;

당신은 어떤 회전 수 있도록해야 할 것이다 - 아마도 당신이 적용된 것을 회전 알고있다.

출처

2013-07-22 13:47:21

캔버스 크기를 이미지 너비보다 크거나 같게 설정해야합니다. 그렇지 않은 경우 Canvas 해상도 외부의 픽셀은 검은 색으로 표시됩니다. –

이미지에서 픽셀 색상 가져 오기

답변

관련 문제