Javascript 存储画布部分的最有效方法？

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

我目前正在将画布转换为dataUrl，用它创建一个“new Image（）”，并将其存储到一个数组中。但结果证明这相当慢，并且在发生这种情况时会将应用程序冻结一秒钟

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

---

那么，有没有更快的方法来保存当前画布，或者有没有方法在每次不创建新画布的情况下将一小部分转换为dataUrl？

您可以创建一个与要保存的区域大小相同的画布：

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

然后将原始画布绘制到保存区域，通过

（-x0，-y0）

进行转换，以便将感兴趣的部分复制到

保存区域

像素中

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

要恢复，只需在首先清除受影响部分后将

保存区域

缩回画布（这是正确处理透明度所必需的）

---

你可以在

Hmm中看到一个有效的例子，它要求我处理10-50张保存画布。我会尝试一下，看看是否效果更好，谢谢。你需要一个存放保存部件的地方。对每个部分使用单独的画布是最好的方法。如果您正在实现撤消/重做，那么命令模式会更好，但这是另一个故事……最后制作了一个临时画布，调整其大小并将保存部分绘制到其中，然后使用我已经使用过的“new Image（）”数组。现在作品完美了。1）画布和2）小部分的尺寸是多少？@gamealchest它们都不同。画布大部分是1000x1000左右，我想截面通常是从50x50到500x500。

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