이미지에서 픽셀의 x, y 좌표 색상을 얻는 방법은 무엇입니까?

Question

PNG 이미지의 선택된 (x, y) 점이 투명한지 확인할 수있는 방법이 있습니까?

Answer 1

Jeff의 답변을 바탕으로 작성한 첫 번째 단계는 PNG의 캔버스 표현을 만드는 것입니다. 다음은 이미지와 너비 및 높이가 같고 그 위에 이미지가 그려진 오프 스크린 캔버스를 만듭니다. 사용자가 클릭이 위치를 얻을 수 event.offsetX 및 event.offsetY을 사용하여 그 후

var img = document.getElementById('my-image'); 
var canvas = document.createElement('canvas'); 
canvas.width = img.width; 
canvas.height = img.height; 
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height); 

. 이것은 다음 픽셀을 획득하는 데 사용될 수

var pixelData = canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data; 

하나만 화소 잡는 때문에이 pixelData 화소의 R, G, B, 및 값을 포함하는 네 개의 엔트리 배열이다. 알파의 경우 255 미만의 문자는 투명도가 0이고 투명도가 완전히 투명 함을 나타냅니다.

다음은 jsFiddle 예제입니다. http://jsfiddle.net/thirtydot/9SEMf/869/이 모든 작업을 편리하게하기 위해 jQuery를 사용했지만 꼭 필요한 것은 아닙니다.

참고 : 나는 믿고 다른 도메인이나 (에서 이미지와 캔버스 더러운 경우이 기술을 의미 데이터 유출을 방지하기 위해 브라우저의 동일 출처 정책에 따라getImageData 폭포, 실패,하지만 일부 브라우저는이 문제를 해결 한 수) 모든 도메인의 SVG. 이렇게하면 로그인 한 사용자의 사이트가 사용자 정의 이미지 자산을 제공하고 공격자가 이미지를 읽어 정보를 얻고 싶어하는 경우를 방지 할 수 있습니다. 같은 서버에서 이미지를 제공하거나 Cross-origin resource sharing을 구현하여 문제를 해결할 수 있습니다.

Answer 2

@pst가 위에서 말했듯이, Canvas는 이것을 수행하는 좋은 방법입니다. 좋은 예를 들어이 답변을 체크 아웃 :

getPixel from HTML Canvas?

특히뿐만 아니라 서비스를 제공 할 일부 코드 : 그 변환해야합니다 것 때문에

var imgd = context.getImageData(x, y, width, height); 
var pix = imgd.data; 

for (var i = 0, n = pix.length; i < n; i += 4) { 
    console.log pix[i+3] 
} 

이것은, 행 단위로 이동됩니다 x, y에 넣고 for 루프를 직접 체크로 변환하거나 내부를 조건부로 실행합니다.

다시 질문을 읽으면 그 사람이 클릭하는 지점을 얻을 수 있기를 원합니다. 이 작업은 jquery의 click 이벤트를 통해 매우 쉽게 수행 할 수 있습니다. 그냥 같은 클릭 핸들러 내부에 위의 코드를 실행

$('el').click(function(e){ 
    console.log(e.clientX, e.clientY) 
} 

그

이 x와 y 값을 잡아해야합니다.

Answer 3

이전 두 답변은 Canvas 및 ImageData 사용 방법을 보여줍니다. 실행 가능한 예제와 이미지 처리 프레임 워크를 사용하여 대답을 제안하고자하므로 수동으로 픽셀 데이터를 처리 할 필요가 없습니다.

은 x, y 좌표의 픽셀 투명도 값을 단순히 반환하는 image.getAlphaComponent (x, y) 메서드를 제공합니다. 이 값이 0이면 픽셀은 완전히 투명하고 1과 254 사이의 값은 투명도 수준입니다. 마지막으로 255는 불투명합니다.투명한 배경 좌표 (0,0)와 (150,150)두 픽셀 I는 (최대 300x300) 아래의 화상을 사용한 증명 용

.

콘솔 출력 :

(0,0) : 투명
(150150) : NOT_TRANSPARENT

var canvas = document.getElementById("canvas"); 
 
image = new MarvinImage(); 
 
image.load("https://i.imgur.com/eLZVbQG.png", imageLoaded); 
 

 
function imageLoaded(){ 
 
    console.log("(0,0): "+(image.getAlphaComponent(0,0) > 0 ? "NOT_TRANSPARENT" : "TRANSPARENT")); 
 
    console.log("(150,150): "+(image.getAlphaComponent(150,150) > 0 ? "NOT_TRANSPARENT" : "TRANSPARENT")); 
 
}

<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script> 
 
<canvas id="canvas" width="500" height="344"></canvas>