Akzentfarbe aus Bild

  • Hallo an alle,


    ich habe einen neuen Auftrag und folgendes Problem. Vereinfacht gesagt möchte ich eine Seite erstellen, die ein vom Nutzer hochgeladenes Bild anzeige soll. Die anderen Elemente auf der HTML Seite sollen dann die Akzentfarbe des Bilds annehmen.


    Ich brauche also den HEX-Code der Akzentfarbe des Bildes, ähnlich wie Windows dass mit dem Hintergrundbild macht. Dort kann man in den Einstellungen ja auch aktivieren, dass der Windowsbutton bspw. die Akzentfarbe annimmt.


    Ist das oder eine ähnliche Lösung mit JavaScript oder einer anderen Sprache möglich? (Ich kenne mich mit JavaScript nicht so aus...)

    Vielen Dank im Voraus und noch einen schönen Abend^^

  • Egal in welcher Sprache, zwei mir bekannte Optionen:

    A: Pixelzeile für Zeile durchgehen, und die Farbe des Pixels speichern, am ende den durschnitt bilden. - sehr genau, aber Resourcenintensiv

    B: Bild auf 1x1 Pixel skalieren und dessen Farbe ist dem Durschnitt ähnlich - nicht ganz so genau, dafür aber sehr Resourcensparend

  • Egal in welcher Sprache, zwei mir bekannte Optionen:

    A: Pixelzeile für Zeile durchgehen, und die Farbe des Pixels speichern, am ende den durschnitt bilden. - sehr genau, aber Resourcenintensiv

    B: Bild auf 1x1 Pixel skalieren und dessen Farbe ist dem Durschnitt ähnlich - nicht ganz so genau, dafür aber sehr Resourcensparend

    Vielen Dank!:)

    Könntest du mir beim Code für Option B helfen? Ich bin da nicht so fit...?(

  • Sorry aber das ist nicht genug eigener versuch, ich mein du erwartest dass ich hier Freizeit von mir investiere dir etwas zu erklären und dir zu helfen. Prinzipeill mach ich das gerne, aber nur wenn schon versucht wird, das ganze selber zu lernen, fanch doch mal mit dem JS part an.. hier ein start Suchbegriff.

  • Das Thema hatten wir erst vor kurzen.

    Hier kannst du lesen wie man mit Javascript den Farbcode unter der Maus raus bekommt.


    javascript und php in ein script


    Weiter hinten im Thema wird das besprochen.

    Hier ist die passende Fiddel ,die zum schluss rauskam. https://jsfiddle.net/Sempervivum/751o5166/1/

    Farbcode wird in Konsole ausgegeben .

    Fals du Fragen dazu hast dann frag ruhig.

  • Ich habe da mal was gebaut das dir den durchschnitts wert der Farbe errechnet.

    Das dauert nur etwas weil er jeden Pixel durchegehen muss. In beispiel sind es 50x50 Pixel. Dauert etwa 3-5 Sekunde. Danach erhälst du den Farbcode und die passende Farbe wird in body angezeigt.

    vieleicht kann das mal einer von den Profis schöner machen .Weil denke den Code könnte man noch besser schreiben


    https://basti1012.bplaced.net/…rdner=html-seminar&id=289

  • Kann mir mal ein Profi ssagen warum in mein Script das

    Code
    $('#check').html(bla bla);

    Nur einmal am ende ausgeführt wird.

    Das ist ja in den Schleifen und müsste in diesen fall 2500 mal aufgerufen werden oder nicht?

    Wollte das als optik so laufen lassen damit man sieht das der code auch arbeitet.Aber es wird nur einmal aufgerufen am ende des schleifen durchlaufs.Kann mir das mal einer erklären warum das so ist .

  • Das ist in der Tat ziemlich ineffizient:

    1. Mit setPixels kann man das ganze Bild auf einmal abarbeiten. Ruft man setPixels für jedes Pixel auf mit width:1 und height:1 wird das Bild bei jedem Aufruf mit getImageData aus dem Canvas gelesen und mit putImageData zurück geschrieben.

    2. Die RGB-Werte kann man in Variablen führen. Andernfalls muss für jedes Pixel der RGB-Wert aus dem Localstorage gelesen und zurück geschrieben werden.


    Ich schlage dieses vor:

  • Habe mal fiddle gemacht mit dein code.

    https://basti1012.bplaced.net/…rdner=html-seminar&id=289


    Habe das gleiche Bild wie bei mir genommen.Deine Ausgabe ist dunkler als das Bild und meine heller als das Bild.

    Ich kenne mich in Kunst nicht aus,aber müsste wenn man Blau mit weiss mischt nicht hellblau rauskommen ??


    Oder habe ich da jetzt ein denk fehler drinne ?


    Und dein Code ist aufjedenfall besser ,vorallem schneller ,riesen unterschied

  • Für den Themen Ersteller hier hast du das fertige Script womit du deine Elemente einfärben kannst in Durchschnittsfarbe

    https://basti1012.bplaced.net/…rdner=html-seminar&id=289

    ist von Sempervivum . Habe nur die fiddle herausgemacht.


    Was macht den das fromCenter ?

    Ich hatte auch versucht den Fehler zufinden,habe alles nochmal nach gerrechnet und und .Aber da währe ich nie drauf gekommen,weil ich auch nicht weiß was das macht.


    Wie macht den das Script den Pixel Durchlauf?

    Ich habe ja mit schleife jede Pixel durchgegangen. Wie funktioniert das den bei dir ,weil verstehe nicht wo und wie die pixel kordinaten oder sonst was ermittelt wird

  • Zitat

    Was macht den das fromCenter ?

    Das wird hier erklärt:

    https://projects.calebevans.me/jcanvas/docs/rectangles/


    Zitat

    weil ich auch nicht weiss was das macht.

    Ich habe es heraus gefunden, indem ich die RGB-Werte in der Console ausgegeben habe. Dabei sah man sofort, dass in jeder Zeile 32-mal 0,0,0 ausgegeben wurde.


    Zitat

    Wie functioniert das den bei dir

    Wenn man setPixels aufruft, führt jCanvas natürlich auch ein Schleife über alle Pixel aus und ruft für jedes Pixel das each-Callback auf. Soweit ich weiß, sind in der Funktion dann nur die RGB-Werte verfügbar. Braucht man x und y, muss man dies selber berechnen.

  • Das du 000 zwischen wahr paar mal das hatte ich auch gesehen.konnte mir das nur nicht erklären,hatte gedacht das er da immer den pixel neben das bild ausliest.


    Also ist setpixels eine function die von sich aus schon jeden Pixel durchläuft. Und das richtig schnell:)

  • basti1012 Der witz ist jetzt das Bild im canvas auf 1x1 pixel zu verkleinern und dann die Farbe des einen Pixels zu lesen! :)

    Ja davon habe ich auch schon gelesen. In Canvas bin ich noch nicht gut.Wüsste nicht wie ich das schreiben müsste.Wäre aber interesant zu wissen ob dann das gleiche rauskommt ( rgb Farbwert ) wie bei diesen Script hier.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!