2013-07-22 40 views
17

Tarayıcımda bir görüntü var.Görüntüden piksel rengi al

Görüntünün döndürülüp döndürülmediğine bakılmaksızın, görüntü renginin sol üst pikseli (koordinatlarda: 0,0) almak istiyorum.

Bunu javascript veya php kodu kullanarak nasıl yapabilirim?

+2

mümkün dupe, JavaScript içinde bir görüntüden bir pikseli (x, y) nasıl: http://stackoverflow.com/questions/8751020/how-to-get-a-pixels-color -of-an-image –

+0

Bir PHP çözümü için bkz. [php kullanarak görüntünün ilk pikseli alın] (http://stackoverflow.com/questions/14178182/get-the-first-pixel-from-the-image- kullanılarak-php). Gömülü bir resmin değil, oluşturulmuş bir sayfanın görüntüsünü istiyorsanız size yardımcı olmaz. Oluşturulmuş bir sayfanın piksel rengini elde etmek için [JavaScript gözcüsü (fare imlecinin altındaki Pixel'in rengini söyle)] 'de kabul edilen yanıtı görün (http://stackoverflow.com/questions/1936021/javascript-eyedropper-tell-color-of -piksel-under-fare-imleci). – user

+0

Olası bir kopyası [Bir pikselin x, y görüntüsünü nasıl bir görüntüden koyabilirsiniz?] (Https://stackoverflow.com/questions/8751020/how-to-get-a-pixels-xy-coordinate-color-from -an-image) –

cevap

34
  • bir tuval document.createElement
  • oluştur 2d bağlam canvas.getContext('2d')
  • tuvale resim çizin alın context.drawImage(image, x, y)
    • emin olun görüntü aynı alan adına veya erişemez onun piksellere
  • görüntünün context.getImageData(x1, y1, x2, y2)
      piksel verileri alın
    • Bunu dizisi r, g, b ve a değerlere sahip olacaktır
      • data alan (context.getImageData(0,0,1,1).data) var bu yüzden context.getImageData(0, 0, 1, 1)
    • getImageData sonucu piksel dizisini olacak sadece üst sol istiyorum.
+0

olmasa bile siyah olarak gelir. Teşekkürler. Çok hızlı bir cevap için ödül almalısın. Tarayıcı, html5'i desteklemiyorsa durum nedir? php kodunda herhangi bir çözüm var mı? – Eitan

+2

@Eitan - kanvas için destek yoksa piksel verilerini almak için sunucu tarafı kodunu kullanmak için görüntüyü (bir AJAX isteğiyle) sunucuya iletmeniz veya işlemek için Flash/Silverlight iğnesini kullanmanız gerekir. –

+2

Dikkat edilmesi gereken başka bir nokta: drawImage ile oluşturulan piksel değerleri, renk alanı düzeltmesi nedeniyle görüntünüzdeki değerlerden farklı olabilir.İyi bir şey, bu sadece görüntüde renk alanı bilgisi içeriyorsa gerçekleşir. – ironic

12

Tarayıcıdaki bir görüntü için, önce görüntüyü bir sunucuya aktaramazsanız PHP'yi kullanamazsınız. Bir canvas görüntüyü çizebilirsiniz eğer

n tarayıcı, sen getImageData() yöntemi kullanabilirsiniz:

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; 

herhangi dönüş için izin olurdu - muhtemelen sen uygulanmıştır Ne rotasyon biliyorum.

+0

Tuval boyutu, görüntü genişliğinden büyük veya ona eşit olacak şekilde ayarlanmalıdır. Aksi takdirde, Tuval çözünürlüğü dışındaki pikseller, –