將圖像轉換爲ImageData（Uint8ClampedArray）

Question

我有一個圖像例如 「img/Myimage.jpg」 我想將其轉換爲Uint8ClampedArray格式（如圖所示）。

對於什麼？我正在使用一個庫，經過一段漫長的過程將圖像轉換爲這種格式，但我有其他圖像，我需要將它們自己轉換爲相同的格式。我該怎麼做？請原諒我的無知

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}); 
} 

我需要轉換我的圖片的ImageData（Uint8ClampedArray）和增加的幀

Answer 1

您可以使用Image構造，CanvasRenderingContext2D.drawImage()和CanvasRenderingContext2D.getImageData()從圖像文件創建一個ImageData對象。

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); 
}