javascript - 在drawImage中使用ImageData对象

Question

是否可以使用ImageData数组对象来获取Image()对象。我的最终目标是使用drawImage而不是putImageData，因为putImageData太慢(来自stackoverflow类似的qs和我自己的测试)。我所拥有的只是 ImageData 数组，我想将其绘制在 Canvas 上现有图像的顶部。

Answer 1

您可以从 ImageData 创建一个 ImageBitmap 并将其传递给 drawImage()。 https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap

类似于:

const imgdata = ...;
const ctx = ...;

createImageBitmap(imgdata).then(function(imgBitmap) {
    ctx.drawImage(imgBitmap, ...remaining args);
});

我能够这样做来缩放我拥有的一些ImageData，因为putImageData没有用于缩放的参数。不幸的是，IE、Edge 和 Safari 似乎不支持 createImageBitmap()。

值得一提的是，对于我的情况(调整 ImageData 的大小)，createImageBitmap() 确实有额外的选项用于调整生成的 ImageBitmap 的大小它自己的。