将图像转换为 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);
}