将图像转换为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），以添加其他帧。

- yavg

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

- guest271314

---

太好了！你使用了“const”吗？在这一行中，我必须放置我的图像路径吗？Image.src =“img / Myimage.jpg”？ - yavg

@yavg var 可以替换为 const。是的，图像文件的路径应该设置在 new Image 实例的 .src 属性中。 - guest271314

@guest271314，我遇到了这个问题...你能帮我吗？https://jsfiddle.net/svvmrwvv/我的图片不是300 x 311的大小...不适合尺寸。 - yavg

@guest271314 https://stackoverflow.com/questions/45378163/resize-image-within-canvas-when-generating-it - yavg

如果图像大小不是300 * 311会发生什么？ - Peterlits Zo

Answer 2

使用canvas绘制抽取方法的异步/等待解决方案，需要一个源字符串参数（如果已经有图像，可以传递image.src）：

/** @param {string} source */
async function imageDataFromSource (source) {
   const image = Object.assign(new Image(), { src: source });
   await new Promise(resolve => image.addEventListener('load', () => resolve()));
   const context = Object.assign(document.createElement('canvas'), {
      width: image.width,
      height: image.height
   }).getContext('2d');
   context.imageSmoothingEnabled = false;
   context.drawImage(image, 0, 0);
   return context.getImageData(0, 0, image.width, image.height);
}

例子：

// image source
const source = 'https://raw.githubusercontent.com/Rovoska/undertale/master/sprites/images/spr_maincharad_3.png';

// async wrapper
async epic () {
   // log data to console
   console.log(await imageDataFromSource(source));
}

// do the epic
epic();

- spacefluff432