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 anzeigen 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

Der hier verwendete Code

<h1>Erste Versuch von Basti</h1> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.3/jcanvas.js"></scipt> <canvas width="100" height="100"></canvas> <div id="ausgabecode"></div> <p id="element"> Drücke das bild und du bekommst die Durchschnittsfarbe.Das kann ein paar Sekunden dauern.Je nach Bild grösse </p> <div id="check"> </div> <script> var zuruck=0; var bildx=50; var bildy=50; localStorage.setItem('aufgabeNr1', zuruck); localStorage.setItem('aufgabeNr2', zuruck); localStorage.setItem('aufgabeNr3', zuruck); cv = $("canvas"); cv.drawImage({ source: "/image/durchschnittsfabe.jpg", layer: true, crossOrigin: 'anonymous', x: 0, y: 0, fromCenter: false, mousedown: function (layer) { for(a=0;a<=bildx;a++){ for(s=0;s<=bildy;s++){ cv.setPixels({ x: a, y: s, width: 1, height: 1, each: function (px) { // console.log(a+':'+s) var r= px.r; var g= px.g; var b= px.b; var r1=localStorage.getItem('aufgabeNr1','0'); var g1=localStorage.getItem('aufgabeNr2','0'); var b1=localStorage.getItem('aufgabeNr3','0'); console.log('R:'+r1+' :G'+g1+' B:'+b1); rote=r+parseInt(r1); grun=g+parseInt(g1); blau=b+parseInt(b1); localStorage.setItem('aufgabeNr1', rote); localStorage.setItem('aufgabeNr2', grun); localStorage.setItem('aufgabeNr3', blau); //if(a<100){ $('#check').html('<br>Kontrolle<br>Aktuell RGB<br>R:'+r+'<br>G'+g+' <br>B:'+b+'<br>Gesamt RGB<br>R'+localStorage.getItem('aufgabeNr1')+'<br>G:'+localStorage.getItem('aufgabeNr2')+'<br>B:'+localStorage.getItem('aufgabeNr3')); //} ende=bildx*bildy; fertigrot=rote/ende; fertiggrun=grun/ende; fertigblau=blau/ende; fertigrot=fertigrot.toFixed(0); fertiggrun=fertiggrun.toFixed(0); fertigblau=fertigblau.toFixed(0); } }); } } $('#ausgabecode').html('rgb('+fertigrot+','+fertiggrun+','+fertigblau+')'); fab='rgb('+fertigrot+','+fertiggrun+','+fertigblau+')'; $('body').css('background',fab); } }); </script> <h1>Verbesserte Variante von Sempevivum</h1> <style> #rgbwert{ font-size:25px; color:yellow; } </style> <canvas id="can"></canvas> <div id="rgbwert"> </div> <script> var im = new Image(); im.onload = function () { $("#can").drawImage({ layer: true, crossOrigin: 'anonymous', source: im.src, fromCenter: false, load: function () { $("#can").setPixels({ x: 0, y: 0, width: 1, height: 1, fromCenter: false, each: function (px) { r= px.r; g= px.g; b= px.b; } }); $('#rgbwert').html("rgb(" + r + "," + g + "," + b +")") $('body').css("background","rgb(" + r + "," + g + "," + b +")") console.log(r, g, b); } }); } im.src = "/image/durchschnittsfabe.jpg"; </script>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!