javascript - 将图像转换为 ImageData (Uint8ClampedArray)

Question

例如我有一张图片“img/我的图像.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);
}