JavaScript Pipette (Farbe des Pixels unter dem Mauszeiger angeben)

Ich bin auf der Suche nach einem "Pipette" - tool, das gibt mir den hex-Wert der pixel sich die Maus unter, in JavaScript für ein CMS.

Für Firefox gibt es die ausgezeichnete ColorZilla - Erweiterung, die genau das leistet. Jedoch, es ist FF nur natürlich, und ich würde wirklich gerne liefern, das tool zusammen mit dem CMS.

Ein holländischer Entwickler hat die sehr gute Idee eine Kombination von Ajax und PHP imagecolorat() um herauszufinden, die Pixel-Farbe auf ein Bild. Aber das schränkt die Auswahl an Bildern ich kann auf server-Seite, und ich bin wirklich träumen ein universal-Werkzeug.

Werde ich die Arbeit mit einem dieser Ansätze, würde aber viel lieber eine cross-browser, Javascript-oder Flash-basiert Weg, dass erfordert keine server-Seite hantieren und keine Installation von Erweiterungen.

Ich bin auch daran interessiert, irgendwelche IE-spezifischen Lösungen, die tun, was ColorZilla kann - könnte ich Leben, mit Unterstützung von IE und FF nur, wenn eine cross-browser-Lösung wäre natürlich ideal.

Kommentare dem Thema
Es ist nicht möglich, in Javascript bin ich nicht sicher über Flash. Kommentarautor: SLaks
In der Theorie, könnten Sie in der Lage, die Stil-Informationen in Verbindung mit das oberste element unter dem Mauszeiger, und bestimmen, welche die Farbe des Elements sollte, wenn Sie nicht ein Bild oder Leinwand. In der Praxis wäre dies wohl dich verrückt, Umgang mit Grenzen und Rand-und browser-Macken. Ich denke, dass Elijah ' s Antwort ist die einzig praktikable. Kommentarautor: Aaronaught

InformationsquelleAutor der Frage Pekka 웃 | 2009-12-20

  1. 62

    Es ist nicht möglich, mit JavaScript geht es gegen cross-domain-Sicherheit. Es wäre sehr schlecht, wenn Sie wüssten, was Pixel aus dem Bild http://some-other-host/yourPassword.png. Sie können nur sagen, die Farbe des pixels unter der Maus, wenn der Mauszeiger über eine Leinwand oder ein Bild-element von der gleichen domain (oder einem Bild-element von einer anderen Domäne serviert, der mit einem Access-Control-Allow-Origin: * header). Im Falle der Leinwand, Sie würde tun canvasElement.getContext('2d').getImageData(x, y, 1, 1).data. Im Fall der Bilder, die Sie haben würde, um zu zeichnen auf eine Leinwand, mit:

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

    Und dann nur mit der vorherigen Methode beschrieben Leinwände. Wenn Sie muss in der Lage sein zu konvertieren, um verschiedene Darstellungen der Farbwerte, versuchen, mein color.js Bibliothek.

    Auch, du wirst niemals in der Lage sein, um Unterstützung von IE <9 (das ist vorausgesetzt, dass der IE9 unterstützt das canvas-Bereich) und mit Flash wird nicht helfen, da es nicht Lesen kann-die-pixel-Daten des Dokumentes.

    InformationsquelleAutor der Antwort Eli Grey

  2. 12

    Mithilfe einer Technik namens Browser Timing Attack, ist es möglich (irgendwie) bestimmen Sie die Farbe aller pixel, auch auf iframes.

    Grundsätzlich, diese Technik misst die Zeit, die zum Rendern von SVG-filter auf ein element, sondern als die Farbe selbst (requestAnimationFrame() erlaubt, um die Zeit zu Messen mit einem viel besseren Genauigkeit als setTimeout()). Je nach dem aktuellen pixel Farbe, der filter nimmt mehr oder weniger Zeit, sich zu bewerben. Dies macht es möglich, zu bestimmen, ob ein pixel die gleiche Farbe als Farbe, beispielsweise schwarz oder weiß.

    Mehr details in diesem Whitepaper (pdf): http://www.contextis.com/documents/2/Browser_Timing_Attacks.pdf

    Übrigens: ja, dies ist eine browser-Sicherheitslücke, aber ich sehe nicht, wie der browser-Anbieter können es Flicken.

    InformationsquelleAutor der Antwort François Zaninotto

  3. 11

    Zusammenführen der verschiedenen Referenzen finden Sie hier bei StackOverflow und in anderen Seiten, hab ich ja mit javascript und 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>

    Dies ist meine komplette Lösung.. Hier habe ich nur verwendet, Leinwand und ein Bild, aber wenn Sie verwenden müssen <map> über das Bild, es ist jedoch auch möglich. Ich hoffe geholfen zu haben.

    InformationsquelleAutor der Antwort ebragaparah

  4. 6

    Bin ich einverstanden mit der sehr ausführlichen Antwort von Elias. Darüber hinaus würde ich sagen, dass Sie nicht brauchen, die Leinwand, wenn es um Bilder geht. Wie Sie erklärte sich selbst, Sie haben diese Bilder in php machen können und die Farbe-Abfrage auf dem server.

    Ich würde vorschlagen, dass Sie dieses problem behandeln mit einem externen tool, das macht es sogar browser-getrennte (aber OS-abhängig): ein kleines tool schreiben (z.B. in c#) welche nicht die Farbe, die Abfrage für Sie, die aufgerufen wird, mit einer Tastenkombination und schickt die Farbe auf Ihren server. Stellen Sie das tool als download zur Verfügung auf Ihrem CMS.

    Andere Herangehensweise, die ich für ein CMS zu "stehlen" Farben, die durch das Parsen von CSS: der use-case war, um die Farben von einer bereits bestehenden Website als Farb-palette zu meiner Bewerbung:

    • Fragte ich den Benutzer auf eine URL aus dem Zielsystem - zumeist der Homepage des Unternehmens
    • Ich analysiert die Seite zu finden, alle Farbdefinitionen in alle inline-styles und verknüpfte Formatvorlagen
    • (Sie können leicht erweitern diese um alle referenzierten Bilder)
    • das Ergebnis war eine schöne Farbpalette mit allen coporate-Farben, zum von zu wählen

    Vielleicht ist das auch eine Lösung für Ihr CMS?

    InformationsquelleAutor der Antwort rdmueller

  5. 4

    Ich weiß nicht, ob das machbar ist, aber wenn deine Seiten statisch sind, das Sie retten könnte ein Bild screenshot der jeder von Ihnen (oder vielleicht eine für jeden browser/Bildschirm-Auflösung? ) und dann mithilfe von AJAX senden Sie die cursor Koordinaten, um die server und die Rückgabe der Pixelfarbe mit der PHP -imagecolorat().

    Nehmen die screenshots, die Sie nutzen könnten Selenium IDE wie beschrieben hier.

    Hoffe, es hilft.

    InformationsquelleAutor der Antwort jbochi

  6. 3

    Hinzufügen, um die vorherigen Antworten --

    Einer Art des Denkens über das problem ist, dass Sie in der Lage sein wollen zu tun, ein screen-capture eines von 1px 1px region. Eine weit verbreitete Technik zur Erfassung von Bildschirm-Regionen (z.B. in Web-basierten bug-reporting-Systemen) ist die Verwendung eines signierten Java-applet und java.das awt.Roboter, um das Bild aufzunehmen. Wenn Sie sich das applet, die Benutzer erhalten einen "do you trust this app" - dialog (mit einem "immer Vertrauen" - apps aus diesem Verlag" markiert) und dann wird in der Lage sein, um das tool zu verwenden.

    Können Sie dann das Ergebnis bis auf JavaScript und LiveConnect - (die Dokumente sind alt, aber Java-applets unterstützen diese), oder Sie können es auf Ihrem server. Ebenso können Sie rufen Sie in dem Java-applet von JavaScript.

    InformationsquelleAutor der Antwort

  7. 3

    Sehen, neuen input[type=Farbe] HTML5-element: http://www.w3.org/TR/html-markup/input.color.html, http://demo.hongkiat.com/html5-form-input-type/index2.html.

    Nun, es funktioniert zumindest im Chrome (getestet in Ubuntu, sollte die Arbeit auch für Windows). Es startet der Farbe-dialog wählen Sie zur Verfügung gestellt von Betriebssystem. Wenn es eine Pipette, die in diesem dialog (für Gnome), dann ist es möglich, wählen Sie eine Farbe von jedem Punkt auf dem Bildschirm. Nicht cross-browser noch nicht, aber sauber und standards basiert.

    InformationsquelleAutor der Antwort tema

  8. 2

    Als Sicherheitsmaßnahme, die Sie nicht erfassen kann Bildschirm-Pixel mit Javascript (so dass die Entwickler nicht nehmen Schnappschüsse Ihrer personenbezogenen Daten), aber du KANNST es in Flash-Sie können die pixel-Daten im Flash-container über das flash.display.BitmapData-Klasse.

    Check-out http://www.sephiroth.it/tutorials/flashPHP/print_screen/ - ich habe es im Flash-basierten WYSYWIG Projekte zum speichern von Bildern auf einem LAMP (PHP -) server.

    Das problem mit Flash ist, dass es nicht nativ unterstützt auf iOS-Geräte, die sehr beliebt sind jetzt und lohnt sich die Entwicklung für. Flash ist auf dem Weg nach unten die Rohre.

    Canvas-basierten Methode wird sicher eine gute sein, sofern alle Ihre Besucher up-to-date web-Browser unterstützen das canvas-tag und JavaScript.

    InformationsquelleAutor der Antwort supershwa

  9. 1

    Gibt es keinen eingebauten DOM-Methode, um allgemein die Farbe eines DOM-Elements (außer Bilder oder ein <canvas>) an einer bestimmten Pixelposition.

    So, um dies zu tun, müssen wir so etwas wie HTML2Canvas oder DOM-Panda einen "screenshot" von unserer website, erhalten die Benutzer auf Lage, und Holen Sie sich die pixel-Farbe von "screenshot" an diesem besonderen Ort.

    Mit HTML2Canvas (version 0.5.0-beta3) können Sie etwas wie das hier tun:

    //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

    InformationsquelleAutor der Antwort Zach Saucier

Schreibe einen Kommentar