SORU
20 Aralık 2009, Pazar


JavaScript damlalık (fare imleci altındaki Pikselin rengini söyle.)

Bir arıyorum "Damlalık" bir CMS. Javascript beni fare imleci altında pikselin hex değeri veren araç,,,

Firefox için tam olarak bunu yapıyor o ColorZilla mükemmel bir uzantısıdır. Ancak, tabii ki FF sadece çok CMS ile birlikte aracı teslim etmek istiyorum.

Hollandalı bir geliştirici Ajax bir arada kullanarak very clever idea ve PHP imagecolorat() bir görüntü üzerinde Piksel renk bulmak için.Ama sunucu tarafında erişemiyorum görüntüleri ile sınırlargerçekten evrensel bir araç hayal ediyorum.

Bu yaklaşımlardan biri ile çalışırım ama çok uzantıları sunucu tarafı işe yaramaz ve hiçbir yükleme gerektiren çapraz tarayıcı, Javascript ya da Flash tabanlı bir yolu tercih ederdim.

Ayrıca ne ColorZilla bunu özel çözümler yapabilir YANİ herhangi bir ilgi duyuyorum - YANİ destekleme ve çapraz tarayıcı çözüm elbette ideal olacaktır ama sadece FF ile yaşayabilirim.

CEVAP
20 Aralık 2009, Pazar


Çapraz etki alanı güvenlik aykırı olarak JavaScript ile mümkün değil. Eğer piksel görüntü, http://some-other-host/yourPassword.png uydurma ne öğrenirse çok kötü olurdu. Tek söylemek rengin piksel altında fare ya da fare üzerinde bir tuval ya da bir resim elemanının aynı etki alanı (veya resim öğesi başka bir etki alanı olan bir servis ile bir Access-Control-Allow-Origin: * başlık). Tuval durumda, canvasElement.getContext('2d').getImageData(x, y, 1, 1).data. Görüntülerin durumda, bir tuvale çizmek gerekir:

var canvas = document.createElement("canvas");
canvas.width = yourImageElement.width;
canvas.height = yourImageElement.height;
canvas.getContext('2d').drawImage(yourImageElement, 0, 0);

Ve sonra sadece önceki yöntem tuvaller için açıkladı kullanın. Eğer renk değeri çeşitli temsilleri dönüştürmek mümkün olmalıdır, color.js kütüphanemi deneyin.

Ayrıca, sen asla mümkün olacak destek IE <9 (Bu varsayarak 9 destekler tuval) ve Flash kullanarak bir faydası olmaz gibi okuyamıyor piksel verilerini belge ya.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • 0TACTICAL0HIPPY0

    0TACTICAL0HI

    30 EYLÜL 2012
  • Autodesk 3ds Max Learning Channel

    Autodesk 3ds

    23 HAZİRAN 2010
  • Rugiagialia

    Rugiagialia

    1 Ocak 2008