Konvertiere ein Bild in ImageData (Uint8ClampedArray)

Question

Ich habe ein Bild zum Beispiel "img/Myimage.jpg" Ich möchte es in das Uint8ClampedArray-Format konvertieren (wie im Bild gezeigt).

Für was? Ich benutze eine Bibliothek, die nach einem langen Prozess die Bilder in dieses Format konvertiert, aber ich habe andere Bilder, die ich selbst in das gleiche Format konvertieren muss. wie kann ich es tun? Entschuldigen Sie meine Unwissenheit

var frames = animator.frames; 
var res_c = document.getElementById("result"); 
var res_ctx = res_c.getContext('2d'); 
for (var x = 0; x < frames.length; x++) { 
    //***frames are ImageData (Uint8ClampedArray)*** 
    res_ctx.putImageData(frames[x],0,0); 
    console.log(frames[x]) 
    gif.addFrame(res_c,{copy:true,delay: 120}); 
} 

ich konvertieren müssen meine Bilder in Imagedata (Uint8ClampedArray) für andere hinzufügen Rahmen

Answer 1

Sie Image Konstruktor verwenden können, CanvasRenderingContext2D.drawImage() und CanvasRenderingContext2D.getImageData() ein ImageData Objekt aus einer Bilddatei zu erstellen.

const canvas = document.querySelector("canvas"); 
const ctx = canvas.getContext("2d"); 
const width = 300; 
const height = 311; 

const image = new Image; 
image.src = /* Blob URL, "/path/to/image/served/with/cors/headers" */; 
image.onload =() => { 
    ctx.drawImage(image, 0, 0); 
    imageData = ctx.getImageData(0, 0, 300, 311); 
    console.log(imageData); 
}