Ich suche nach einer Pipette , die mir den Hex-Wert des Pixels gibt, unter dem sich der Mauszeiger befindet, in JavaScript für ein CMS.
Für Firefox gibt es die hervorragende ColorZilla- Erweiterung, die genau das tut. Es ist jedoch natürlich nur FF, und ich würde das Tool wirklich gerne zusammen mit dem CMS liefern.
Ein niederländischer Entwickler hatte die sehr clevere Idee , eine Kombination aus Ajax und PHP zu verwenden imagecolorat()
, um die Pixelfarbe auf einem Bild herauszufinden. Aber das beschränkt die Reichweite auf Bilder, auf die ich serverseitig zugreifen kann , und ich träume wirklich von einem universellen Tool.
Ich werde mit einem dieser Ansätze arbeiten, würde aber eine browserübergreifende, Javascript- oder Flash-basierte Methode bevorzugen, die kein serverseitiges Fummeln und keine Installation von Erweiterungen erfordert.
Ich interessiere mich auch für IE-spezifische Lösungen, die das tun, was ColorZilla kann - ich könnte nur mit der Unterstützung von IE und FF leben, obwohl eine browserübergreifende Lösung natürlich ideal wäre.
Antworten:
Mit JavaScript ist dies nicht möglich, da dies gegen die domänenübergreifende Sicherheit verstößt. Es wäre sehr schlecht, wenn Sie wüssten, aus welchen Pixeln das Bild besteht
http://some-other-host/yourPassword.png
. Sie können die Farbe des Pixels unter der Maus nur erkennen, wenn sich die Maus über einer Leinwand oder einem Bildelement derselben Domäne befindet (oder einem Bildelement einer anderen Domäne, die mit einerAccess-Control-Allow-Origin: *
Kopfzeile bedient wird). Im Fall der Leinwand würden Sie tuncanvasElement.getContext('2d').getImageData(x, y, 1, 1).data
. Bei den Bildern müssten Sie sie auf eine Leinwand zeichnen mit:var canvas = document.createElement("canvas"); canvas.width = yourImageElement.width; canvas.height = yourImageElement.height; canvas.getContext('2d').drawImage(yourImageElement, 0, 0);
Verwenden Sie dann einfach die zuvor für Leinwände erläuterte Methode. Wenn Sie in der Lage sein müssen, in verschiedene Darstellungen von Farbwerten zu konvertieren, versuchen Sie es mit meiner color.js- Bibliothek.
Außerdem werden Sie IE <9 niemals unterstützen können (vorausgesetzt, IE9 unterstützt Canvas), und die Verwendung von Flash hilft nicht, da es auch die Pixeldaten des Dokuments nicht lesen kann.
quelle
yourPassword.png
in die Leinwand einzubetten und sie dort abzutasten? (vorausgesetzt, ich kenne die URL)password.png
.Mit einer Technik namens Browser Timing Attack ist es möglich, die Farbe eines beliebigen Pixels (auch auf Iframes) zu bestimmen.
Grundsätzlich misst diese Technik die Zeit zum Rendern eines SVG-Filters für ein Element und nicht die Farbe selbst (
requestAnimationFrame()
ermöglicht das Messen der Zeit mit einer viel besseren Genauigkeit alssetTimeout()
). Abhängig von der aktuellen Pixelfarbe dauert das Anwenden des Filters mehr oder weniger lange. Auf diese Weise kann festgestellt werden, ob ein Pixel dieselbe Farbe wie eine bekannte Farbe hat - beispielsweise Schwarz oder Weiß.Weitere Informationen finden Sie in diesem Whitepaper (pdf): https://www.contextis.com/media/downloads/Pixel_Perfect_Timing_Attacks_with_HTML5_Whitepaper.pdf
Übrigens: Ja, dies ist eine Sicherheitslücke im Browser, aber ich sehe nicht, wie Browser-Anbieter sie patchen können.
quelle
Beim Zusammenführen verschiedener Referenzen, die hier in StackOverflow und auf anderen Websites gefunden wurden, habe ich Javascript und JQuery verwendet:
<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 Komplettlösung. Hier habe ich nur Leinwand und ein Bild verwendet, aber wenn Sie es
<map>
über dem Bild verwenden müssen, ist es auch möglich. Ich hoffe ich habe geholfen.quelle
Ich stimme der sehr detaillierten Antwort von Elia zu. Außerdem würde ich sagen, dass Sie die Leinwand nicht benötigen, wenn es um Bilder geht. Wie Sie selbst angegeben haben, haben Sie diese Bilder in PHP verfügbar und können die Farbabfrage auf dem Server durchführen.
Ich würde vorschlagen, dass Sie dieses Problem mit einem externen Tool behandeln - dies macht es sogar browserunabhängig (aber vom Betriebssystem abhängig): Schreiben Sie ein kleines Tool (zum Beispiel in c #), das die Farbabfrage für Sie ausführt, wird mit einer Verknüpfung aufgerufen und übermittelt die Farbe zu Ihrem Server. Stellen Sie das Tool als Download auf Ihrem CMS zur Verfügung.
Ein weiterer Ansatz, den ich für ein CMS verwendet habe, war das "Stehlen" von Farben durch Parsen des CSS: Der Anwendungsfall bestand darin, die Farben einer bereits vorhandenen Website meiner Anwendung als Farbpalette zur Verfügung zu stellen:
Vielleicht ist das auch eine Lösung für Ihr CMS?
quelle
Siehe neues HTML5-Element für Eingabe [Typ = Farbe]: http://www.w3.org/TR/html-markup/input.color.html , http://demo.hongkiat.com/html5-form-input-type /index2.html .
Jetzt funktioniert es zumindest in Chrome (in Ubuntu getestet, sollte auch für Windows funktionieren). Es startet den vom Betriebssystem bereitgestellten Farbauswahldialog . Wenn sich in diesem Dialogfeld eine Pipette befindet (für Gnome), können Sie an jedem Punkt Ihres Bildschirms eine Farbe auswählen . Noch nicht browserübergreifend, aber sauber und standardbasiert.
quelle
Ich weiß nicht, ob dies machbar ist, aber wenn Ihre Seiten statisch sind, können Sie einen Bild-Screenshot von jedem von ihnen speichern (oder vielleicht einen für jede Browser- / Bildschirmauflösung?) Und dann AJAX verwenden, um die Cursorkoordinaten an die zu senden Server und geben Sie die Pixelfarbe mit PHPs zurück
imagecolorat()
.Um die Screenshots zu machen, können Sie Selenium IDE wie hier beschrieben verwenden .
Ich hoffe es hilft.
quelle
Zu den vorherigen Antworten hinzufügen -
Eine Möglichkeit, dieses Problem zu betrachten, besteht darin, dass Sie in der Lage sein möchten, eine Bildschirmaufnahme eines Bereichs von 1 x 1 Pixel durchzuführen. Eine weit verbreitete Technik zum Erfassen von Bildschirmbereichen (z. B. aus webbasierten Fehlerberichterstattungssystemen) besteht darin, ein signiertes Java-Applet und java.awt.Robot zum Erfassen des Bildes zu verwenden. Wenn Sie das Applet signieren, erhalten Ihre Benutzer das Dialogfeld "Vertrauen Sie dieser App" (mit dem Kontrollkästchen "Apps von diesem Publisher immer vertrauen") und können das Tool dann verwenden.
Sie können das Ergebnis dann mit LiveConnect an JavaScript weitergeben (die Dokumente sind alt, aber Java-Applets unterstützen dies weiterhin), oder Sie können es auf Ihrem Server veröffentlichen. Ebenso können Sie das Java-Applet über JavaScript aufrufen.
quelle
Aus Sicherheitsgründen können Sie keine Bildschirmpixel mit Javascript erfassen (Entwickler können also keine Schnappschüsse Ihrer persönlichen Daten erstellen), aber Sie können dies in Flash tun - Sie können Pixeldaten im Flash-Container mithilfe der Datei flash.display abrufen .BitmapData-Klasse.
Check out http://www.sephiroth.it/tutorials/flashPHP/print_screen/ - Ich habe es in Flash-basierten WYSYWIG-Projekten verwendet, um Bilder auf einem LAMP (PHP) -Server zu speichern.
Das Problem bei der Verwendung von Flash ist, dass es auf iOS-Geräten, die derzeit sehr beliebt sind und für die es sich zu entwickeln lohnt, nicht nativ unterstützt wird. Der Blitz ist auf dem Weg durch die Röhren.
Die Canvas-basierte Methode ist sicherlich eine gute, vorausgesetzt, alle Ihre Besucher verfügen über aktuelle Webbrowser, die das Canvas-Tag und JavaScript unterstützen.
quelle
Es gibt keine eingebaute DOM-Methode, um die Farbe eines DOM-Elements (außer Bildern oder a
<canvas>
) an einer bestimmten Pixelposition generisch abzurufen.Dazu müssen wir beispielsweise HTML2Canvas oder DOM Panda verwenden , um einen "Screenshot" unserer Website zu erstellen, den Klickort des Benutzers zu ermitteln und die Pixelfarbe des "Screenshots" an diesem bestimmten Ort abzurufen .
Mit HTML2Canvas (Version 0.5.0-beta3) können Sie Folgendes 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
quelle
background-color
Div oben links (sogar auf dem Div selbst)