Ich bin mir nicht sicher, ob dies möglich ist, aber ich möchte ein Skript schreiben, das den Durchschnitt hex
oder rgb
Wert für ein Bild zurückgibt. Ich weiß, dass es in AS gemacht werden kann, aber ich möchte es in JavaScript machen.
javascript
image-manipulation
bgreater
quelle
quelle
Antworten:
AFAIK, der einzige Weg dies zu tun ist mit
<canvas/>
...DEMO V2 : http://jsfiddle.net/xLF38/818/
Beachten Sie, dass dies nur mit Bildern in derselben Domäne und in Browsern funktioniert, die HTML5-Canvas unterstützen:
Schauen Sie sich für IE excanvas an .
quelle
'rgb('+rgb.r+','+rgb.b+','+rgb.g+')'
und das sollte sein'rgb('+rgb.r+','+rgb.g+','+rgb.b+')'
. Es ist seltsam, wenn die dominierende Farbe blau ist, aber das Ergebnis ist grün :).img.crossOrigin = '';
bevor Sie dassrc
Attribut festlegen. Gefunden auf: coderwall.com/p/pa-2uwcount === length / 4 / blockSize
;)Ich dachte, ich würde ein Projekt veröffentlichen, auf das ich kürzlich gestoßen bin, um eine dominante Farbe zu erhalten:
Farbdieb
Die anderen Lösungen, die dominante Farben erwähnen und vorschlagen, beantworten die Frage nie wirklich im richtigen Kontext ("in Javascript"). Hoffentlich hilft dieses Projekt denen, die genau das wollen.
quelle
"Dominante Farbe" ist schwierig. Sie möchten den Abstand zwischen jedem Pixel und jedem anderen Pixel im Farbraum (euklidischer Abstand) vergleichen und dann das Pixel finden, dessen Farbe jeder anderen Farbe am nächsten kommt. Dieses Pixel ist die dominierende Farbe. Die durchschnittliche Farbe ist normalerweise Schlamm.
Ich wünschte, ich hätte MathML hier, um Ihnen die euklidische Entfernung zu zeigen. Google es.
Ich habe die obige Ausführung im RGB-Farbraum mit PHP / GD hier durchgeführt: https://gist.github.com/cf23f8bddb307ad4abd8
Dies ist jedoch sehr rechenintensiv. Es wird Ihr System bei großen Bildern zum Absturz bringen und Ihren Browser definitiv zum Absturz bringen, wenn Sie es im Client versuchen. Ich habe daran gearbeitet, meine Ausführung zu überarbeiten, um: - Ergebnisse in einer Nachschlagetabelle für die zukünftige Verwendung in der Iteration über jedes Pixel zu speichern. - Aufteilen großer Bilder in Raster von 20 x 20 Pixel für eine lokalisierte Dominanz. - den euklidischen Abstand zwischen x1y1 und x1y2 verwenden, um den Abstand zwischen x1y1 und x1y3 zu ermitteln.
Bitte lassen Sie mich wissen, wenn Sie in dieser Hinsicht Fortschritte machen. Ich würde mich freuen, es zu sehen. Ich werde dasselbe tun.
Canvas ist definitiv der beste Weg, dies im Client zu tun. SVG ist nicht, SVG ist vektorbasiert. Nachdem ich die Ausführung beendet habe, möchte ich sie als Nächstes auf der Leinwand zum Laufen bringen (möglicherweise mit einem Webworker für die Berechnung der Gesamtentfernung jedes Pixels).
Eine andere Sache, über die man nachdenken sollte, ist, dass RGB kein guter Farbraum dafür ist, da der euklidische Abstand zwischen Farben im RGB-Raum nicht sehr nahe am visuellen Abstand liegt. Ein besserer Farbraum dafür könnte LUV sein, aber ich habe keine gute Bibliothek dafür gefunden oder irgendwelche Algorithmen für die Konvertierung von RGB in LUV.
Ein völlig anderer Ansatz wäre, Ihre Farben in einem Regenbogen zu sortieren und ein Histogramm mit Toleranz zu erstellen, um unterschiedliche Farbtöne zu berücksichtigen. Ich habe dies nicht versucht, da das Sortieren von Farben in einem Regenbogen schwierig ist, ebenso wie Farbhistogramme. Ich könnte das als nächstes versuchen. Lassen Sie mich noch einmal wissen, ob Sie hier Fortschritte machen.
quelle
Erstens: Dies kann ohne HTML5 Canvas oder SVG erfolgen.
Eigentlich jemand einfach zu verwaltender Client-seitige PNG - Dateien mit Hilfe von JavaScript zu generieren , ohne Leinwand oder SVG, die unter Verwendung von Daten - URI - Schema .
Zweitens: Möglicherweise benötigen Sie Canvas, SVG oder eines der oben genannten Elemente überhaupt nicht.
Wenn Sie nur benötigen Prozessbilder auf der Client - Seite, ohne sie zu modifizieren, all dies ist nicht erforderlich.
Sie können die Quelladresse aus dem img-Tag auf der Seite abrufen , eine XHR- Anfrage dafür stellen - sie wird höchstwahrscheinlich aus dem Browser-Cache stammen - und sie als Byte-Stream aus Javascript verarbeiten.
Sie benötigen ein gutes Verständnis des Bildformats. (Der obige Generator basiert teilweise auf libpng-Quellen und bietet möglicherweise einen guten Ausgangspunkt.)
quelle
Ich würde über das HTML-Canvas-Tag sagen.
Sie können finden hier einen Beitrag von @Georg sprechen über einen kleinen Code von der Opera dev:
Dies invertiert das Bild unter Verwendung des R-, G- und B-Werts jedes Pixels. Sie können die RGB-Werte problemlos speichern, dann die roten, grünen und blauen Arrays aufrunden und sie schließlich wieder in einen HEX-Code konvertieren.
quelle
Ich bin kürzlich auf ein jQuery-Plugin gestoßen, das genau das tut, was ich ursprünglich wollte: https://github.com/briangonzalez/jquery.adaptive-backgrounds.js , um eine dominierende Farbe aus einem Bild zu erhalten.
quelle
Javascript hat keinen Zugriff auf die einzelnen Pixelfarbdaten eines Bildes. Zumindest nicht bis html5 ... an diesem Punkt liegt es nahe, dass Sie ein Bild auf eine Leinwand zeichnen und dann die Leinwand untersuchen können (vielleicht habe ich es selbst nie gemacht).
quelle
All-in-One-Lösung
Ich persönlich würde Color Thief zusammen mit dieser modifizierten Version von Name that Color kombinieren , um eine mehr als ausreichende Auswahl an dominanten Farbergebnissen für Bilder zu erhalten.
Beispiel:
Betrachten Sie das folgende Bild:
Mit dem folgenden Code können Sie Bilddaten extrahieren, die sich auf die dominante Farbe beziehen:
quelle
Hier geht es um " Farbquantisierung ", die verschiedene Ansätze wie MMCQ (Modified Median Cut Quantization) oder OQ (Octree Quantization) hat. Unterschiedliche Ansätze verwenden K-Mittel , um Farbcluster zu erhalten.
Ich habe hier alles zusammen geputtet, da ich eine Lösung für
tvOS
eine Teilmenge von XHTML gefunden habe, die kein<canvas/>
Element enthält:Generieren Sie die dominanten Farben für ein RGB-Bild mit XMLHttpRequest
quelle
Weniger genau, aber der schnellste Weg, um mit
datauri
Unterstützung die durchschnittliche Farbe des Bildes zu erhalten :quelle
Wie in anderen Antworten ausgeführt, ist häufig die dominierende Farbe das, was Sie wirklich wollen, im Gegensatz zu der durchschnittlichen Farbe, die dazu neigt, braun zu sein. Ich habe ein Skript geschrieben, das die häufigste Farbe erhält, und es in diesem Kern veröffentlicht
quelle
Es gibt ein Online-Tool pickimagecolor.com , mit dem Sie die durchschnittliche oder dominante Farbe des Bildes ermitteln können. Sie müssen lediglich ein Bild von Ihrem Computer hochladen und dann auf das Bild klicken. Es gibt die durchschnittliche Farbe in HEX, RGB und HSV. Es werden auch die Farbtöne gefunden, die zu dieser Farbe passen, aus der Sie auswählen können. Ich habe es mehrfach benutzt.
quelle