javascript - 将操作后的 ImageData 存储到 imageObject 中。Javascript

Question

我想加载一个图像，将其复制 2 次，然后操作其他 2 个图像。不知何故，我想用这两个克隆做一些“后处理”的东西。我不想得到画布部件并操纵它们。我正在编写一个实时 2D 游戏，在每一帧中操纵每一个图像是很疯狂的。我发现的许多解决方案只是从画布上“切割”部分，处理它们并将它们写回画布上。但我希望将经过处理的图像存储在 imageObjects 中，以便能够直接绘制它们，就好像它们是“真实”图像一样。

Answer 1

画布仍然是处理图像的最佳方式。您通过画布切片context.getImageData()可以通过context.putImageData()（请参阅使用画布进行像素操作）绘制回来，因此我看不到将图像数据转换为图像的真正优势。但是，如果您更喜欢“真实”的图像对象，您可以使用canvas.toDataURL()并创建带有此 URL 的图像对象。这些方面的东西：

// Create temporary canvas
var canvas = document.createElement("canvas");
canvas.setAttribute("width", imageData.width);
canvas.setAttribute("height", imageData.height);

// Put image data into canvas
var context = canvas.getContext("2d");
context.putImageData(imageData, 0, 0);

// Extract canvas data into an image object
var image = new Image();
image.src = canvas.toDataURL("image/png");
image.onload = function() {alert("Image object can be used")};