Akzentfarbe aus Bild

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

Ja helfen kann ich dir gerne, aber anfangen musst du

Hier eine kleine Hilfestellung was verlangt wird: Wie erstelle ich korrekt einen neuen Beitrag im HTML & HTML5 Forum - bitte vor dem Erstellen eines neuen Themas lesen!

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

$('#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:

    <canvas id="avgcolor"></canvas>
    <script>
        var cv = $("#avgcolor");
        var im = new Image();
        im.onload = function () {
            var width = this.width, height = this.height;
            console.log(width, height);
            cv.attr("width", width).attr("height", height + 100);
            cv.drawImage({
                layer: true,
                source: im.src,
                x: 0, y: 0,
                fromCenter: false,
                load: function () {
                    var sumr = 0, sumg = 0, sumb = 0;
                    cv.setPixels({
                        x: 0, y: 0,
                        width: width, height: height,
                        each: function (px) {
                            sumr += px.r;
                            sumg += px.g;
                            sumb += px.b;
                        }
                    });
                    var nrpx = width * height;
                    var avgr = Math.floor(sumr / nrpx),
                        avgg = Math.floor(sumg / nrpx),
                        avgb = Math.floor(sumb / nrpx);
                    console.log(avgr, avgg, avgb);
                    cv.drawRect({
                        width: 100, height: 100,
                        x: 0, y: height,
                        fromCenter: false,
                        fillStyle: "rgb(" + avgr + "," + avgg + "," + avgb +")"
                    })
                }
            });
        }
        im.src = "images/bg_sprite.png";
    </script>

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

Zitat

müsste wenn man Blau mit weiss mischt nicht hellblau rauskommen

Das stimmt natürlich. Muss ich mir mal ansehen ...

Dies hier

sumr += px.r;

Das wollte ich in mein Code auch machen.Habe es aber nicht hinbekommen .keine ahnung was da falsch lief.Deswegn hatte ich den umweg über localstorage() genommen.

Da fehlt ein fromCenter in meinem Code. So ist es richtig:

                    cv.setPixels({
                        x: 0, y: 0,
                        width: width, height: height,
                        fromCenter: false,
                        each: function (px) {

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!

Zitat von wolf

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.

Zitat

Wüsste nicht wie ich das schreiben müsste

Siehe hier:

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

Bei "Custom width/height"