Question

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

Answer 1

画布仍然是操纵图像的最佳方式。您通过context.getImageData()获得的画布切片可以通过context.putImageData()进行回刷（请参阅Pixel manipulation with canvas），因此我看不到将图像数据转换为图像的真正优势。但是，如果您更喜欢＆＃34;真实的＆＃34;在图像对象中，您可以使用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")};

将操纵的ImageData存储到imageObject中。使用Javascript

1 个答案: