Jak uzyskać kolor współrzędnych x, y piksela z obrazu?

Czy istnieje sposób, aby sprawdzić, czy wybrany punkt (x, y) obrazu PNG jest przezroczysty?

Opierając się na odpowiedzi Jeffa, pierwszym krokiem byłoby utworzenie płótna reprezentującego plik PNG. Poniższy rysunek tworzy obszar roboczy poza ekranem, który ma taką samą szerokość i wysokość jak obraz i jest narysowany na nim.

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

Następnie, gdy użytkownik kliknie, użyj event.offsetXi, event.offsetYaby uzyskać pozycję. Można to następnie wykorzystać do pozyskania piksela:

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

Ponieważ pobierasz tylko jeden piksel, pixelData jest tablicą składającą się z czterech wpisów, zawierającą wartości R, G, B i A. W przypadku alfa cokolwiek poniżej 255 reprezentuje pewien poziom przezroczystości, przy czym 0 oznacza pełną przezroczystość.

Oto przykład jsFiddle: http://jsfiddle.net/thirtydot/9SEMf/869/ Użyłem jQuery dla wygody w tym wszystkim, ale w żadnym wypadku nie jest to wymagane.

Uwaga: getImageData podlega polityce tego samego pochodzenia przeglądarki, aby zapobiec wyciekom danych, co oznacza, że ​​ta technika nie powiedzie się, jeśli zabrudzisz płótno obrazem z innej domeny lub (uważam, ale niektóre przeglądarki mogły to rozwiązać) SVG z dowolnej domeny. Chroni to przed przypadkami, gdy witryna wyświetla niestandardowy zasób obrazu dla zalogowanego użytkownika, a osoba atakująca chce odczytać obraz, aby uzyskać informacje. Możesz rozwiązać problem, udostępniając obraz z tego samego serwera lub wdrażając udostępnianie zasobów między źródłami .

Canvas byłby świetnym sposobem na zrobienie tego, jak powiedział @pst powyżej. Sprawdź tę odpowiedź, aby uzyskać dobry przykład:

getPixel z HTML Canvas?

Kod, który również by Ci służył:

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]
}

Będzie to przebiegać wiersz po wierszu, więc musisz przekonwertować to na x, y i albo przekonwertować pętlę for na bezpośrednie sprawdzenie, albo uruchomić warunek wewnątrz.

Czytając ponownie swoje pytanie, wygląda na to, że chcesz uzyskać informację, w którą stronę klika dana osoba. Można to zrobić dość łatwo za pomocą zdarzenia kliknięcia jquery. Po prostu uruchom powyższy kod w module obsługi kliknięć, takim jak:

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

Powinny one obejmować wartości x i y.

Dwie poprzednie odpowiedzi pokazują, jak używać Canvas i ImageData. Chciałbym zaproponować odpowiedź z uruchomionym przykładem i przy użyciu struktury przetwarzania obrazu, więc nie musisz ręcznie obsługiwać danych pikseli.

MarvinJ udostępnia metodę image.getAlphaComponent (x, y), która po prostu zwraca wartość przezroczystości dla piksela we współrzędnych x, y. Jeśli ta wartość wynosi 0, piksel jest całkowicie przezroczysty, wartości od 1 do 254 to poziomy przezroczystości, a na końcu 255 jest nieprzezroczyste.

Do zademonstrowania użyłem poniższego obrazu (300x300) z przezroczystym tłem i dwoma pikselami o współrzędnych (0,0) i (150,150) .

Wyjście konsoli:

(0,0):
PRZEŹROCZYSTY (150,150): NIE_TRANSPARENTNY

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>

Z : 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);
}