javascript - 存储 Canvas 一部分的最有效方法？

Question

我正在制作一个应用程序，我需要存储 Canvas 的“快照”，以便稍后使用它们。

我目前正在将 Canvas 转换为 dataUrl，用它创建一个“new Image()”，并将其存储到一个数组中。但事实证明这非常慢，并且在发生这种情况时应用程序会卡住一瞬间。

我知道一个问题；它保存了整个 Canvas ，而我只需要保存其中的一小部分。

那么，有没有更快的方法来保存当前 Canvas ，或者有什么方法可以只将一小部分变成dataUrl，而不需要每次都创建新的 Canvas ？

Answer 1

您可以创建一个与您要保存的区域大小相同的 Canvas :

var save_area = document.createElement("canvas");
save_area.width = x1 - x0;
save_area.height = y1 - y0;

然后将原始 Canvas 绘制到保存区域，由(-x0, -y0)翻译，以便将您感兴趣的部分复制到save_area中像素。

save_area.getContext("2d").drawImage(original_canvas, -x0, -y0);

要恢复，只需在首先清除受影响的部分后将 save_area 拉回到 Canvas 中(这是正确处理透明度所必需的)。

original_canvas_context.clearRect(x0, y0, x1-x0, y1-y0);
original_canvas_context.drawImage(save_area, x0, y0);

您可以在http://jsfiddle.net/Lhmrswch/2/中看到一个工作示例。