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