2013-07-22 12 views
17

Mam obraz w przeglądarce.Uzyskaj piksel z obrazu

Chcę uzyskać lewy górny piksel koloru obrazu (na współrzędnych: 0,0), bez względu na to, czy obraz jest obrócony, czy nie.

Jak mogę to zrobić, używając kodu javascript lub php?

+2

Możliwa dupe, jak uzyskać piksel (x, y) z obrazu w javascript: http://stackoverflow.com/questions/8751020/how-to-get-a-pixels-color -of-an-image –

+0

Aby uzyskać rozwiązanie PHP, zobacz [pobierz pierwszy piksel z obrazu za pomocą php] (http://stackoverflow.com/questions/14178182/get-the-first-pixel-from-the-image- using-php). Chociaż nie pomoże ci to, jeśli chcesz uzyskać obraz renderowanej strony, a nie obraz osadzony. Jeśli chodzi o uzyskanie koloru piksela renderowanej strony, zobacz zaakceptowaną odpowiedź w [Kroplomierzu JavaScript (powiedz kolorowi piksela pod kursorem myszy)] (http://stackoverflow.com/questions/1936021/javascript-eyedropper-tell-color-of -piksel pod kursorem myszy). – user

+0

Możliwy duplikat [Jak uzyskać kolor współrzędnych x, y piksela z obrazu?] (Https://stackoverflow.com/questions/8751020/how-to-get-a-pixels-xy-coordinate-color-from -an-image) –

Odpowiedz

34
  • Tworzenie document.createElement płócienną
  • Pobierz 2d kontekst canvas.getContext('2d')
  • narysować obraz na płótnie context.drawImage(image, x, y)
    • Upewnij się, że obraz jest z tej samej domeny lub nie będzie miał dostępu do jego pikseli
  • Get danych pikseli dla obrazu context.getImageData(x1, y1, x2, y2)
    • Chcesz tylko górny lewy tak context.getImageData(0, 0, 1, 1)
  • Wynik getImageData będzie miał tablicę pikseli w to data pole (context.getImageData(0,0,1,1).data)
    • Tablica będzie miał r, g, b i a wartości.
+0

Dziękuję. Myślę, że powinieneś otrzymać nagrodę za bardzo szybką odpowiedź. Co się dzieje, jeśli przeglądarka nie obsługuje html5. Czy istnieje jakieś rozwiązanie w kodzie php? – Eitan

+2

@Eitan - jeśli nie ma obsługi płótna, musisz przekazać obraz (z żądaniem AJAX) do serwera, aby użyć kodu po stronie serwera, aby uzyskać dane pikseli lub użyć obrzydliwości Flash/Silverlight do obsługi tego obrazu. –

+2

Kolejny punkt, na który należy zwrócić uwagę: wartości pikseli renderowane za pomocą funkcji drawImage mogą różnić się od wartości na obrazie ze względu na korektę przestrzeni kolorów.Dobrze, że dzieje się tak tylko wtedy, gdy obraz zawiera informacje o przestrzeni kolorów. – ironic

12

Do obrazu w przeglądarce nie można używać PHP, chyba że najpierw można przesłać obraz do serwera.

n przeglądarka, jeśli można narysować obraz w canvas można użyć metody 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; 

Trzeba by umożliwić każdej rotacji - przypuszczalnie wiesz co rotacja została zastosowana.

+0

Rozmiar płótna musi być większy lub równy szerokości obrazu. W przeciwnym razie piksele poza rozdzielczością Canvas będą wyświetlane jako czarne, nawet jeśli nie są –

Powiązane problemy