JavaScript: Farbe des Pixels der Mausposition ermitteln
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
arbeiten
betriebssystem
bild
browser
code
dank
ermitteln
farbauswahl
farbe
http
lupe
pipette
pixel
programm
standard
system
tool
url
windows
zeiger
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Moin,
Nur mit JavaScript wird es nicht funktionieren.
Hier eine Lösung, die bereits 2009 hier im hier im Forum gepostet wurde: https://www.lima-city.de/thread/farbe-ermitteln
Vielleicht hilft sie dir weiter.
Gruß
Stefan
Beitrag zuletzt geändert: 30.12.2015 3:11:09 von alfke -
alfke schrieb:
Moin,
Dankeschön, aber das ist nicht, was ich suche. Bei mir kann man kein Bild nehmen, weil der Untergrund ein dynamisches Webdokument ist und kein Bild oder feststehendes, konstant abbildbares Medium.
Nur mit JavaScript wird es nicht funktionieren.
Hier eine Lösung, die bereits 2009 hier im hier im Forum gepostet wurde: https://www.lima-city.de/thread/farbe-ermitteln
Vielleicht hilft sie dir weiter.
Gruß
Stefan
Wahrscheinlich gibt es dann mit den heutigen Mitteln ohne Java oder Flash, wovon ich nichts halte, keine Lösung. -
Das behauptest du so... Mir fallen da schon Möglichkeiten ein, die haben aber bestimmte Voraussetzungen.
Eine Möglichkeit ist beispielsweise das document.getElementFromPoint, um die entsprechenden Elemente des Punktes zu untersuchen. Damit bist du aber an Möglichkeiten des Elementes gebunden, also vor allem Hintergrundfarbe. Bilder könntest du hier anhand der CSS Eigenschaften (window.getComputedStyle) auslesen, auf ein Canvas rendern, und dann getImageData(x,y,1,1) nutzen, um den Pixel zu erfragen.
Hat aber halt Randbedingungen.
Eine weitere, aber unerprobte, mögilchkeit ist es, HTML auf ein Canvas zu rendern und dann den Pixel auszulesen.
Dafür setzt du ein SVG aus, was ca so aussieht:
<svg height="..." width="..."> <foreignObject height="100%" width="100%"> ... HTML ...</foreignObject> </svg>
In ein foreignObject kannst du alles HTML packen, es würde dann entsprechend gerendert. Dieses SVG kannst du als Image rendern:
var svgContent = '<svg ....'; var ctx = document.getElementById('hiddenCanvas').getContext('2d'); var img = new Image(); img.src = svgContent; img.onload = function () { ctx.drawImage(img, height, width); alert('Pixelcolor: ' + ctx.getImageData(x,y,1,1)); };
Damit könntest du (habs nicht getestet) die Pixelfarbe eines bestimmten Pixels deiner Seite auslesen, wenn auch das aufwendig ist.
Aaaaaber: Hier gibts Beschränkungen. Das HTML im foreignObject kann keine externen Daten Referenzieren, heißt Bilder, CSS oder ähnliches können nicht geladen werden (soweit ich weiß). Heißt, du musst theoretisch den gesamten DOM durcharbeiten und alle externen Ressourcen nacharbeiten, heißt jeden Style inline anfügen, jedes Bild als Base64 anfügen, dann, nach alle dem, besteht die Chance, dass es funktioniert.
Möglich ist es also, mit Randbedingungen und je nachdem Aufwand. Aber sonst, ganz einfach, ohne all diesen Aufwand, ist mir leider auch nichts bekannt. Tut mir leid.
Beitrag zuletzt geändert: 30.12.2015 18:58:00 von ggamee -
So, bis ich meinen Kommentar nun endlich fertig getippt hatte, war ggamee hier schneller.
Eigentlich hat er in seinem Kommentar schon alles gesagt und meiner ist damit weitgehend überflüssig/doppelt geworden.
Trotzdem hier noch mein Erklärungsversuch (vielleicht ist ja was ergänzendes mit dabei).
---------
Wie schon erkannt, eine einfache Lösung in JavaScript gibt es nicht
mit der man einen Pixel des gerenderten Inhalts in einem Browserfenster auslesen könnte.
Es ist zwar möglich das ganze in pure JavaScript zu realisieren,
aber ich vermute du unterschätzt ganz massiv die Problemstellung sowie dessen allumfassende Lösung ansich.
Hier nur ein einfaches Grund-Beispiel wie man aus einem HTML-DOM ein SVG-Image machen kann (via foreignObject)
um dieses sodann in einem Canvas-Element zu zeichnen (via drawImage)
Die Pixel in einem Canvas-Element-Context können sodann ausgelesen werden (via getImageData(sx, sy, sw, sh).data).
Jeder Pixel wird mit 4 ArrayElementen wiedergegeben und entspricht dem RGBA-Color-Wert[r, g, b, a].
var myImg = new Image(); myImg.src = "data:image/svg+xml," + myImg.src += "<svg xmlns='http://www.w3.org/2000/svg' width='300' height='80'>" + myImg.src += "<foreignObject width='100%' height='100%'>" + myImg.src += "<h1 xmlns='http://www.w3.org/1999/xhtml'>DasIstNurEinBeispiel</h1>" + myImg.src += "</foreignObject>" + myImg.src += "</svg>" var myCanvas = document.createElement("canvas"); var myContext = canvas.getContext("2d"); myImg.onload = function() { myContext.drawImage(myImg, 0, 0); }; function getImagePixelColor(myX, myY) { var myRGBA_Array = myContext.getImageData(myX, myY, 1, 1).data; alert("rgba(" + myRGBA_Array[0] + "," + myRGBA_Array[1] + "," + myRGBA_Array[2] + "," + myRGBA_Array[3] + ")"); }
Das ganze ist aber wenn man es allumfassend lösen will, wesentlich aufwendiger als in diesem primitiven Beispiel gezeigt.
Mit dem CodeBeispiel wollte ich nur den Lösungs-Ansatz verdeutlichen/veranschaulichen.
Natürlich wären width+height des SVG-Area dem window.innerWidth+Height anzupassen.
Natürlich gäbe es so einige Stolperschwellen bezüglich svg-foreignObject, welches kein iframe/canvas/flash unterstützt.
Natürlich wäre mehr zu tun als einfach nur document.documentElement.outerHTML ins svg-foreignObject zu kippen,
ggf. script-tags und style-tags entfernen und stattdessen inlineStyles je Element aus getComputedStyles().cssText zu generieren...etc...
Auch wäre es wichtig überhaupt mal abzuklären was man überhaupt möchte
und wie man das in einer Art präsentiert welche auch tatsächlich vom Nutzer gangbar angewendet werden kann.
Einfach nur einen Pixel auszulesen auf welchen der Cursor/Mauszeiger zeigt ist so nicht ausreichend,
denn kein Mensch kann sich da orientieren auf welchen mikromillimeter der Zeiger zeigt.
Normalerweise löst man das anders, man zeigt einen kleinen Ausschnitt(Bsp: 15x15px) sehr stark vergrössert in einer hinzugeblendeten LupenAnsicht an
damit man genau verfolgen kann über welchen Pixel da der Zeiger gerade gleitet.
Nur so kann man zielsicher einen Pixel auswählen.
U.a. ein Buchstabe auf einer HTML-Seite welcher die Farbe Schwarz hat, wird nicht nur einfach mit schwarzen Pixeln gerendert.
Das FineRendering zur Vermeidung des Treppcheneffekts verwendet hierzu mind. unterschiedliche Graustufen oder gar unterschiedliche Farbtöne.
Normalerweise benötige ich eine Pixel-Farb-Pimpette nur im Rahmen meiner eigenen Arbeiten.
Deshalb programmiere ich mir sowas nicht extra selber.
Ich benutzte hierzu einfach fertige Tools(keine WebApps) welche mir normalerweise jedes Betriebssystem zur Verfügung stellt.
Diese Tools/Programme lesen einfach nur generell die Pixel am Screen stellen diese in einer Lupe dar inclusive des Farbcodes zu jedem gewünschten Pixel.
Unter Mac-OSX heisst das System-Tool "Digital Color Meter".
Unter Windows gibt es mindestens zig tausende kostenlose Programme ala "Color-Pimpette" (bitte selber raussuchen).
Für so ziehmlich jedes Betriebssystem gibt es da schon Native-Programme kostenlos oder von haus aus mit dabei.
Als Not-Ersatz-Beispiel-Lösung in Form eines Browser-Plugins für Firefox/Chrome könnte man noch nennen http://www.colorzilla.com/firefox/ -
ggamee und lumix, vielen Dank für Eure Hilfe!
Mal sehen, vielleicht schaffe ich es dank Euch ja doch … Respekt, wie viel Zeit Ihr investiert, um anderen Usern zu helfen!
lumix schrieb:
[…]
Das habe ich absichtlich nicht mit einkalkuliert, weil es ein Tool werden soll, mit dem man den tatsächlichen gerenderten Pixel angezeigt bekommen soll. Eine Lupenansicht ist allerdings eine gute Idee.
Auch wäre es wichtig überhaupt mal abzuklären was man überhaupt möchte
und wie man das in einer Art präsentiert welche auch tatsächlich vom Nutzer gangbar angewendet werden kann.
Einfach nur einen Pixel auszulesen auf welchen der Cursor/Mauszeiger zeigt ist so nicht ausreichend,
denn kein Mensch kann sich da orientieren auf welchen mikromillimeter der Zeiger zeigt.
Normalerweise löst man das anders, man zeigt einen kleinen Ausschnitt(Bsp: 15x15px) sehr stark vergrössert in einer hinzugeblendeten LupenAnsicht an
damit man genau verfolgen kann über welchen Pixel da der Zeiger gerade gleitet.
Nur so kann man zielsicher einen Pixel auswählen.
U.a. ein Buchstabe auf einer HTML-Seite welcher die Farbe Schwarz hat, wird nicht nur einfach mit schwarzen Pixeln gerendert.
Das FineRendering zur Vermeidung des Treppcheneffekts verwendet hierzu mind. unterschiedliche Graustufen oder gar unterschiedliche Farbtöne.
[…]
[…]
Für eigene Zwecke hätte ich natürlich auch nie so etwas programmiert, nur ist es halt 100mal attraktiver und einfacher für Seitenbesucher, wenn sie sich zu diesen Demonstrationszwecken nichts herunterladen (da könnten ja Viren drin sein) und keine System-/Fremdsoftwaretools benutzen müssen, weil on-Page-Anwendungen praktischer für seltene Benutzung sind und direkt in Bezug zum Inhalt der Seite stehen können.
Normalerweise benötige ich eine Pixel-Farb-Pimpette nur im Rahmen meiner eigenen Arbeiten.
Deshalb programmiere ich mir sowas nicht extra selber.
Ich benutzte hierzu einfach fertige Tools(keine WebApps) welche mir normalerweise jedes Betriebssystem zur Verfügung stellt.
Diese Tools/Programme lesen einfach nur generell die Pixel am Screen stellen diese in einer Lupe dar inclusive des Farbcodes zu jedem gewünschten Pixel.
Unter Mac-OSX heisst das System-Tool "Digital Color Meter".
Unter Windows gibt es mindestens zig tausende kostenlose Programme ala "Color-Pimpette" (bitte selber raussuchen).
Für so ziehmlich jedes Betriebssystem gibt es da schon Native-Programme kostenlos oder von haus aus mit dabei.
Als Not-Ersatz-Beispiel-Lösung in Form eines Browser-Plugins für Firefox/Chrome könnte man noch nennen http://www.colorzilla.com/firefox/
Beitrag zuletzt geändert: 1.1.2016 17:34:50 von funnyweb -
Viel Erfolg und Spaß beim ausprogrammieren,
aber nicht unterschätzen das ist ein Stück Arbeit alle Feinheiten und Workarrounds vollständig zu implementieren.
Wenn du dafür nur 2*Nachmittage investieren willst, dann glaube ich das du damit nicht zu einem zufriedenstellenden Ergebnis kommen wirst.
Wenn du aber das ganze wirklich bis zum Ende durchziehen willst, dann ist es durchaus machbar
und die verbleibenden Lücken/Probleme, welche du nicht via Workarround umschiffen könntest, wären letztendlich durchaus tragbar.
Also eine eigene gangbare/eronomische pureJavaScript Lösung(ColorPicker incl. Magnifier) mit HTML5+SVG+Canvas ist machbar.
Einen zusätzlichen LupenAusschnitt als Navigatinshilfe zur gezielten Pixelauswahl sehe ich jedoch als umbedingt notwendig an,
alles andere wäre nur oberflächlich gesehen eine Lösung und in der Praxis jedoch unbrauchbar.
Beispiel: jPipette
Hier hat z.B. schon jemand eine Pixel-Pimette in JavaScript umgesetzt, jedoch leider OHNE den umbedingt erforderlichen LupenAusschnitt.
Aubgebaut ist das ganze auf jQuery und https://html2canvas.hertzen.com
Übrigens html2canvas geht im Grundprinzip den selben Weg wie von ggamee und mir vorgeschlagen ( SVG-foreignObject - Canvas ).
http://havalite.com/experiment/jPipette/
Man kann eine ColorPimpette(incl. Lupe) auch haben indem man einfach nur das html-tag "input" verwendet mit html-attribut type="color".
Ein Click auf das Eingabefeld/Farbkästchen ruft sodan das Standard-System-Tool(oder ein Browser-Tool) zur Farbauswahl auf.
Auf MacOSX enthält dieses Farbauswahltool eine Pimpette, aber dies gilt dort nur für z.B. Firefox/Chrome/Opera umd ist leider bei SafariBrowser momentan nicht integriert.
Auf Windows vermute ich daß das Farbauswahltool stets OHNE Pimpette ist.
Andere Betriebssysteme/Browser weiss ich leider nicht was dort das Farbauswahltool enthält oder nicht enthält.
<form><input type="color" name="myColor" value="#ffffff"></form> -
lumix schrieb:
Viel Erfolg und Spaß beim ausprogrammieren,
Danke, dann werde ich wahrscheinlich nur jPipette modifizieren und ggf. um die Lupenfunktion ergänzen … und danke auch für den Tipp mit dem Standard-Farbauswahltool! Unter Ubuntu ist auch eine Pipette enthalten, unter Windows – weiß man nicht – wenn ich ehrlich bin, traue ich Microsoft das nicht zu.
aber nicht unterschätzen das ist ein Stück Arbeit alle Feinheiten und Workarrounds vollständig zu implementieren.
Wenn du dafür nur 2*Nachmittage investieren willst, dann glaube ich das du damit nicht zu einem zufriedenstellenden Ergebnis kommen wirst.
Wenn du aber das ganze wirklich bis zum Ende durchziehen willst, dann ist es durchaus machbar
und die verbleibenden Lücken/Probleme, welche du nicht via Workarround umschiffen könntest, wären letztendlich durchaus tragbar.
Also eine eigene gangbare/eronomische pureJavaScript Lösung(ColorPicker incl. Magnifier) mit HTML5+SVG+Canvas ist machbar.
Einen zusätzlichen LupenAusschnitt als Navigatinshilfe zur gezielten Pixelauswahl sehe ich jedoch als umbedingt notwendig an,
alles andere wäre nur oberflächlich gesehen eine Lösung und in der Praxis jedoch unbrauchbar.
Beispiel: jPipette
Hier hat z.B. schon jemand eine Pixel-Pimette in JavaScript umgesetzt, jedoch leider OHNE den umbedingt erforderlichen LupenAusschnitt.
Aubgebaut ist das ganze auf jQuery und https://html2canvas.hertzen.com
Übrigens html2canvas geht im Grundprinzip den selben Weg wie von ggamee und mir vorgeschlagen ( SVG-foreignObject - Canvas ).
http://havalite.com/experiment/jPipette/
Man kann eine ColorPimpette(incl. Lupe) auch haben indem man einfach nur das html-tag "input" verwendet mit html-attribut type="color".
Ein Click auf das Eingabefeld/Farbkästchen ruft sodan das Standard-System-Tool(oder ein Browser-Tool) zur Farbauswahl auf.
Auf MacOSX enthält dieses Farbauswahltool eine Pimpette, aber dies gilt dort nur für z.B. Firefox/Chrome/Opera umd ist leider bei SafariBrowser momentan nicht integriert.
Auf Windows vermute ich daß das Farbauswahltool stets OHNE Pimpette ist.
Andere Betriebssysteme/Browser weiss ich leider nicht was dort das Farbauswahltool enthält oder nicht enthält.
<form><input type="color" name="myColor" value="#ffffff"></form>
Edit: Ich habe gerade nachgeprüft, weder unter Windows XP noch Vista noch 7 noch 8 noch 10 ist eine Pipette dabei.
Beitrag zuletzt geändert: 2.1.2016 14:06:57 von funnyweb -
funnyweb schrieb:
Dennoch ist das unter Windows (wenn auch etwas umständlich) problemlos möglich:
Edit: Ich habe gerade nachgeprüft, weder unter Windows XP noch Vista noch 7 noch 8 noch 10 ist eine Pipette dabei.
1) Screenshot machen (Druck-Tast)
2) Paint öffnen und Screenshot einfügen (C-V)
3) Als Tool die »Farbauswahl« wählen
4) Falls nötig zoomen
5) Pixel auswählen
6) »Palette bearbeiten« (unter Win7, unter XP war das etwas anders)
7) RGB-Wert ablesen -
god-unknown schrieb:
klar, aber das kann man seinen Webseitenbesuchern ja wohl kaum zumuten, um ein anschauliches Beispiel bei einer Erklärung zu bieten … danke trotzdem :)funnyweb schrieb:
Dennoch ist das unter Windows (wenn auch etwas umständlich) problemlos möglich:
Edit: Ich habe gerade nachgeprüft, weder unter Windows XP noch Vista noch 7 noch 8 noch 10 ist eine Pipette dabei.
1) Screenshot machen (Druck-Tast)
2) Paint öffnen und Screenshot einfügen (C-V)
3) Als Tool die »Farbauswahl« wählen
4) Falls nötig zoomen
5) Pixel auswählen
6) »Palette bearbeiten« (unter Win7, unter XP war das etwas anders)
7) RGB-Wert ablesen -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
