Wie kann ich die Alpha-Vorvervielfachung mit canvas imageData stoppen?

Gibt es eine Möglichkeit, die Vorvervielfachung des Alphakanals für Canvas-Daten oder eine Problemumgehung zu stoppen?

Ich möchte ein Bild erzeugen (in diesem Fall einige zufällige RGB-Werte) und die Leinwand als Bild speichern.

Im zweiten Schritt möchte ich das Originalbild mit dem generierten Bild mithilfe von imageData vergleichen. Dies funktioniert jedoch nicht, da der Alphakanal meiner RGBA-Pixel im generierten Bild vormultipliziert wurde.

Das Beispiel

function drawImage(ctx) {
    var img = ctx.createImageData(canvas.width,canvas.height);

        for (var i=img.data.length;i-=4;) {     
                img.data[i] = Math.floor(Math.random() * 255);
                img.data[i+1] = Math.floor(Math.random() * 255);
                img.data[i+2] = Math.floor(Math.random() * 255);
                img.data[i+3] = Math.floor(Math.random() * 255);
        }

        ctx.putImageData(img, 0, 0);
            // our image data we just set
        console.log(img.data);
            // the image data we just placed onto the canvas
        console.log(ctx.getImageData(0,0,canvas.width, canvas.height).data);
}   

In der Konsole finden Sie zwei console.log-Ausgaben. Die erste vor der Vormultiplikation und die zweite nach der Vormultiplikation. Diese beiden Ausgänge sind unterschiedlich, wobei einige Werte um 3 oder mehr abweichen. Dies geschieht nur, wenn eine teilweise Transparenz vorliegt (das Alpha wird auf einen anderen Wert als 255 gesetzt).

Gibt es eine Möglichkeit, die gleiche Ausgabe zu erhalten? Irgendwelche Ideen zu diesem Problem? Irgendwelche Ideen, wie man so etwas wie eine Problemumgehung für dieses Problem schafft?

Danke im Voraus!

Antworten auf die Frage(2)

Ihre Antwort auf die Frage