我正在创建一个应用程序，我需要存储画布的“快照”，以便稍后使用它们。
我正在将画布转换为dataUrl，用它创建一个'new Image（）'，然后将它存储到一个数组中。但事实证明这种情况非常缓慢，并且当应用程序发生时会暂时冻结应用程序。
我知道有一个问题;它保存了整个画布，而我只需要保存它的一小部分。
那么，有没有更快的方法来保存当前画布，或者有没有办法只将一小部分转换为dataUrl而不是每次都创建新的画布？
答案 0 :(得分：1)
您可以创建一个与要保存区域大小相同的画布：
var save_area = document.createElement("canvas");
save_area.width = x1 - x0;
save_area.height = y1 - y0;
然后将原始画布绘制到保存区域，由(-x0, -y0)翻译，以便您感兴趣的部分以save_area像素复制。
save_area.getContext("2d").drawImage(original_canvas, -x0, -y0);
要在第一次清除受影响的部分后恢复只是将save_area拉回画布（这需要正确处理透明度）。
original_canvas_context.clearRect(x0, y0, x1-x0, y1-y0);
original_canvas_context.drawImage(save_area, x0, y0);