colors best jquery - Eyedropper di JavaScript (indica il colore del pixel sotto il puntatore del mouse)





4 Answers

Usando una tecnica chiamata Browser Timing Attack , è possibile (ordinare) determinare il colore di qualsiasi pixel, anche su iframe.

Fondamentalmente, questa tecnica misura il tempo per il rendering di un filtro SVG su un elemento, piuttosto che sul colore stesso ( requestAnimationFrame() consente di misurare il tempo con una precisione molto migliore di setTimeout() ). A seconda del colore del pixel corrente, il filtro richiede più o meno tempo per essere applicato. Ciò rende possibile determinare se un pixel è dello stesso colore di un colore conosciuto, ad esempio nero o bianco.

Maggiori dettagli in questo white paper (pdf): http://www.contextis.com/documents/2/Browser_Timing_Attacks.pdf

A proposito: sì, questo è un buco di sicurezza del browser, ma non vedo come i rivenditori di browser possano applicarlo.

picker js library

Sto cercando uno strumento " eyedropper ", che mi dia il valore esadecimale del pixel su cui si trova il cursore del mouse, in JavaScript per un CMS.

Per Firefox, c'è l'eccellente estensione ColorZilla che fa esattamente questo. Tuttavia, è solo FF, ovviamente, e mi piacerebbe davvero consegnare lo strumento insieme al CMS.

Uno sviluppatore olandese ha avuto l' idea molto intelligente di utilizzare una combinazione di Ajax e PHP's imagecolorat() per scoprire il colore Pixel su un'immagine. Ma questo limita la gamma di immagini che posso accedere al lato server , e sto davvero sognando uno strumento universale.

Lavorerò con uno di questi approcci, ma preferirei molto un modo cross-browser, Javascript o basato su Flash che non richiede alcuna manipolazione sul lato server e nessuna installazione di estensioni.

Sono anche interessato a qualsiasi soluzione specifica di IE che faccia ciò che ColorZilla può fare - potrei vivere con il supporto solo di IE e FF, anche se una soluzione cross browser sarebbe ovviamente l'ideale.




Sono d'accordo con la risposta molto dettagliata fornita da Elijah. Inoltre, direi che non hai bisogno della tela quando si tratta di immagini. Come hai affermato tu stesso, hai quelle immagini disponibili da php e puoi fare la query colore sul server.

Ti suggerirei di gestire questo problema con uno strumento esterno - questo rende persino browser indipendente (ma dipendente dal SO): scrivi un piccolo strumento (ad esempio in c #) che fa la query colore per te, viene invocato con una scorciatoia e invia il colore al tuo server. Rendi disponibile lo strumento come download sul tuo CMS.

Un altro aproach che ho usato per un CMS è stato quello di "rubare" i colori analizzando il CSS: il caso d'uso era quello di rendere i colori di un sito web già disponibile come tavolozza dei colori alla mia applicazione:

  • Ho chiesto all'utente di fornire un URL dal sistema di destinazione, principalmente la home page della società
  • Ho analizzato la pagina per trovare tutte le definizioni di colore in tutti gli stili in linea e gli stili collegati
  • (puoi facilmente estenderlo a tutte le immagini di riferimento)
  • il risultato è stata una bella tavolozza di colori con tutti i colori di coporati tra cui scegliere

Forse è anche una soluzione per il tuo CMS?




Per aggiungere alle risposte precedenti -

Un modo di pensare a questo problema è che vuoi essere in grado di eseguire uno screen-capture di una regione 1px per 1px. Una tecnica abbastanza comune per catturare le regioni dello schermo (ad esempio nei sistemi di segnalazione dei bug basati su Web) consiste nell'utilizzare un applet Java firmato e java.awt.Robot per acquisire l'immagine. Se firmi l'applet, i tuoi utenti otterranno la finestra di dialogo "ti fidi di questa app" (con una casella di controllo "Considera sempre le app da questo editore") e poi saranno in grado di utilizzare lo strumento.

È quindi possibile passare il risultato a JavaScript utilizzando LiveConnect (i documenti sono vecchi, ma le applet Java lo supportano ancora) oppure è possibile pubblicarlo sul server. Allo stesso modo, è possibile chiamare l'applet Java da JavaScript.




Come precauzione di sicurezza non puoi acquisire pixel dello schermo con Javascript (quindi gli sviluppatori non possono scattare istantanee dei tuoi dati personali), ma puoi farlo in Flash - puoi ottenere dati pixel all'interno del contenitore Flash usando flash.display . Classe BitmapData.

Controlla http://www.sephiroth.it/tutorials/flashPHP/print_screen/ - L'ho usato nei progetti WYSYWIG basati su Flash per salvare le immagini su un server LAMP (PHP).

Il problema con l'utilizzo di Flash è che non è supportato nativamente su dispositivi iOS, che sono estremamente popolari ora e per cui vale la pena di svilupparsi. Il flash è in movimento lungo i tubi.

Il metodo basato su canvas sarà sicuramente valido se tutti i tuoi visitatori dispongono di browser Web aggiornati che supportano il tag canvas e JavaScript.




Related