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




picker js (9)

Vedi nuovo input [type = color] Elemento HTML5: http://www.w3.org/TR/html-markup/input.color.html , http://demo.hongkiat.com/html5-form-input-type/index2.html .

Ora funziona almeno in Chrome (testato in Ubuntu, dovrebbe funzionare anche per Windows). Avvia la finestra di dialogo per la selezione del colore fornita dal sistema operativo . Se c'è un contagocce in questa finestra di dialogo (è per Gnome), allora è possibile scegliere un colore da qualsiasi punto sullo schermo . Non ancora cross-browser, ma pulito e basato su standard.

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.


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.


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.


Non so se questo è fattibile, ma se le tue pagine sono statiche potresti salvare uno screenshot di ciascuna di esse (o forse una per ogni browser / risoluzione dello schermo?) E quindi utilizzare AJAX per inviare le coordinate del cursore al server e restituisce il colore del pixel con imagecolorat() di PHP.

Per prendere gli screenshot, è possibile utilizzare l' IDE Selenium come descritto here .

Spero che sia d'aiuto.


Non è possibile con JavaScript perché va contro la sicurezza tra domini. Sarebbe molto brutto se tu sapessi quali pixel hanno creato l'immagine, http://some-other-host/yourPassword.png . Puoi solo dire il colore del pixel sotto il mouse se il mouse si trova sopra una tela o un elemento immagine dello stesso dominio (o un elemento immagine di un altro dominio che è servito con un Access-Control-Allow-Origin: * intestazione). Nel caso del canvas, dovresti fare canvasElement.getContext('2d').getImageData(x, y, 1, 1).data . Nel caso delle immagini, dovresti disegnarle su una tela con:

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

E quindi basta usare il metodo precedente spiegato per le tele. Se devi essere in grado di convertire in varie rappresentazioni di valori di colore, prova la mia libreria color.js .

Inoltre, non sarai mai in grado di supportare IE <9 (supponendo che IE9 supporti canvas) e l'utilizzo di Flash non sarà di aiuto in quanto non è in grado di leggere i dati dei pixel del documento.


Unendo vari riferimenti trovati qui in e in altri siti, l'ho fatto usando javascript e JQuery:

<html>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script src="jquery.js"></script>
<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var img = new Image();
        img.src = 'photo_apple.jpg';
        context.drawImage(img, 0, 0);
    };

    function findPos(obj){
    var current_left = 0, current_top = 0;
    if (obj.offsetParent){
        do{
            current_left += obj.offsetLeft;
            current_top += obj.offsetTop;
        }while(obj = obj.offsetParent);
        return {x: current_left, y: current_top};
    }
    return undefined;
    }

    function rgbToHex(r, g, b){
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
    }

$('#myCanvas').click(function(e){
    var position = findPos(this);
    var x = e.pageX - position.x;
    var y = e.pageY - position.y;
    var coordinate = "x=" + x + ", y=" + y;
    var canvas = this.getContext('2d');
    var p = canvas.getImageData(x, y, 1, 1).data;
    var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
    alert("HEX: " + hex);
});
</script>
<img src="photo_apple.jpg"/>
</body>
</html>

Questa è la mia soluzione completa. Qui ho usato solo canvas e un'immagine, ma se hai bisogno di usare <map> sull'immagine, è anche possibile. Spero di aver aiutato.


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.


Non esiste un metodo DOM incorporato per ottenere genericamente il colore di un elemento DOM (diverso dalle immagini o da un <canvas> ) in una particolare posizione di pixel.

Pertanto, per fare ciò, dobbiamo usare qualcosa come HTML2Canvas o DOM Panda per fare uno "screenshot" del nostro sito Web, ottenere la posizione del clic dell'utente e ottenere il colore del pixel dello "screenshot" in quella particolare posizione.

Usando HTML2Canvas (versione 0.5.0-beta3) puoi fare qualcosa del genere:

// Take "screenshot" using HTML2Canvas
var screenshotCanvas,
    screenshotCtx,
    timeBetweenRuns = 10,
    lastTime = Date.now();
function getScreenshot() {
    // Limit how soon this can be ran again
    var currTime = Date.now();
    if(currTime - lastTime > timeBetweenRuns) {
        html2canvas(document.body).then(function(canvas) {
            screenshotCanvas = canvas;
            screenshotCtx = screenshotCanvas.getContext('2d');
        });
        lastTime = currTime;
    }
}
setTimeout(function() { // Assure the initial capture is done
    getScreenshot();
}, 100);

// Get the user's click location
document.onclick = function(event) {
    var x = event.pageX,
        y = event.pageY;

    // Look what color the pixel at the screenshot is
    console.log(screenshotCtx.getImageData(x, y, 1, 1).data);
}


// Update the screenshot when the window changes size
window.onresize = getScreenshot;

Demo


Swift 3:

  UITextField.appearance().tintColor = UIColor.black
  UITextView.appearance().tintColor = UIColor.black




javascript jquery colors selection color-picker