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
<script src="/js_webseite/jquery.js"></script>
<script src="js_webseite/jcanvas.js"></script>
<h1>Erste Versuch von Basti</h1>
<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öße
</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>