Zitat
warum geht nur jedes 2te foto?
Das war jetzt ein bisschen verzwickt. Die Sache ist die: Bei der Variablen "alle" handelt es sich um eine "live node list":
https://wiki.selfhtml.org/wiki/JavaScrip…ementsByTagName
Das bedeutet, dass diese Liste aktualisiert wird, wenn sich im DOM etwas ändert. Wenn Du jetzt durch outerHTML aus dem img-Element ein canvas machst, verschwindet es aus der live node list, eben weil es jetzt kein img mehr ist. Dann rückt das nächste an die erste Position. Weil Du aber die Variable g bei jedem Schleifendurchlauf erhöhst, wird jeweils ein Bild übersprungen und Du erreichst das übernächste.
Dieses funktioniert bei mir:
var alle=document.getElementsByTagName('img');
for (var i = 0; alle.length > 0; i++){
var dasbild = alle[0];
var k=dasbild.src;
var w=dasbild.width;
var h=dasbild.height;
var z=dasbild.outerHTML='<canvas id="cv' + i + '" width="'+w+'" height="'+h+'"></canvas>';
var cv = $("#cv" + i);
cv.drawImage({
source:k,
layer: true,
x: 0, y: 0, fromCenter: false,
mousemove: function (layer) {
cv.setPixels({
x: layer.eventX, y: layer.eventY,
width: 1, height: 1,
each: function (px) {
console.log(layer.eventX, layer.eventY, px.r, px.g, px.b);
}
});
}
});
}
Alles anzeigen
Wahrscheinlich wäre das Problem nicht entstanden, wenn man es durchgehend mit jQuery gemacht hätte.