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




5 Answers

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.

jquery picker

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.




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.




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.




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.




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




Related

javascript jquery colors selection color-picker