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

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

---

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

---

Jeff의 답변을 바탕으로 첫 번째 단계는 PNG의 캔버스 표현을 만드는 것입니다. 다음은 이미지와 너비와 높이가 같고 이미지가 그려진 오프 스크린 캔버스를 만듭니다.

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);

그 후, 사용자가 클릭, 사용 때 event.offsetX와는 event.offsetY위치를 얻을 수 있습니다. 그런 다음 픽셀을 얻는 데 사용할 수 있습니다.

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

하나의 픽셀 만 잡기 때문에 pixelData는 픽셀의 R, G, B 및 A 값을 포함하는 4 개의 엔트리 배열입니다. 알파의 경우 255보다 작은 것은 투명도가 어느 정도이며 0은 완전히 투명합니다.

다음은 jsFiddle 예제입니다. http://jsfiddle.net/thirtydot/9SEMf/869/ 편의상 jQuery를 사용했지만 꼭 필요한 것은 아닙니다.

참고 : getImageData 데이터 유출을 방지하기 위해 브라우저의 동일한 출처 정책에 속합니다. 즉, 다른 도메인의 이미지로 캔버스를 더 럽히거나 모든 도메인에서 SVG를 해결하면이 기술이 실패합니다. 이렇게하면 사이트가 로그인 한 사용자에게 사용자 정의 이미지 자산을 제공하고 공격자가 정보를 얻기 위해 이미지를 읽으려고하는 경우를 방지 할 수 있습니다. 동일한 서버에서 이미지를 제공하거나 출처 간 자원 공유를 구현하여 문제점을 해결할 수 있습니다 .

---

@pst가 위에서 말했듯이 Canvas는 이것을 수행하는 좋은 방법입니다. 좋은 예를 보려면이 답변을 확인하십시오.

HTML Canvas에서 getPixel?

구체적으로 제공되는 일부 코드 :

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 값을 가져와야합니다.

---

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

MarvinJ 는 image.getAlphaComponent (x, y) 메소드를 제공하여 x, y 좌표로 픽셀의 투명도 값을 반환합니다. 이 값이 0이면 픽셀은 완전히 투명하고 1에서 254 사이의 값은 투명도 수준이며 마지막으로 255는 불투명합니다.

시연을 위해 투명한 배경과 좌표 (0,0) 및 (150,150)에 두 개의 픽셀이있는 아래 (300x300) 이미지를 사용했습니다 .

콘솔 출력 :

(0,0) : TRANSPARENT
(150,150) : NOT_TRANSPARENT

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>

---

로 : i << 2

const data = context.getImageData(x, y, width, height).data;
const pixels = [];

for (let i = 0, dx = 0; dx < data.length; i++, dx = i << 2) {
    if (data[dx+3] <= 8)
        console.log("transparent x= " + i);
}

참고 URL : https://stackoverflow.com/questions/8751020/how-to-get-a-pixels-xy-coordinate-color-from-an-image