修改后将画布重置为上一张图片

Question

假设我有一个简单的画布元素，并在其上绘制复杂的资源密集型图片。然后我在图片上画了一些简单的线条。有没有办法“保存”画布的状态（在绘制线条之前），然后重绘状态以擦除所做的任何进一步更改。我确实尝试过save()，restore()但我认为它的状态不包括画布上的当前形状。请参阅下面的演示。

var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');

function init() {
  // This is some computationally intensive drawing we don't want to repeat
  context.fillStyle = "rgb(150,29,28)";
  context.fillRect(40, 40, 255, 200);
  context.fillStyle = "rgb(150,83,28)";
  context.fillRect(10, 10, 50, 50);
  context.fillStyle = "rgb(17,90,90)";
  context.fillRect(5, 100, 200, 120);
  context.fillStyle = "rgb(22,120,22)";
  context.fillRect(200, 200, 90, 90);
  // Now we save the state so we can return to it
  saveState();
}

function lines() {
  // This is some drawing we will do and then want to get rid of
  context.beginPath();
  context.moveTo(125, 125);
  context.lineTo(150, 45);
  context.lineTo(200, 200);
  context.closePath();
  context.stroke();
}

function saveState() {
  //copy the data into some variable
}

function loadState() {
  //load the data from the variable and apply to canvas
}

init();

#canvas {
  border: 1px solid #000;
}

<canvas id="canvas" width="300" height="300"></canvas>
<button onClick="lines()">Draw over image</button>
<button onClick="loadState()">Restore</button>

Answer 1

您可以轻松地将画布复制到新画布。

// canvas is the canvas you want to copy.
var canvasBack = document.createElement("canvas");
canvasBack.width = canvas.width;
canvasBack.height = canvas.height;
canvasBack.ctx = canvasBack.getContext("2d");
canvasBack.ctx.drawImage(canvas,0,0);

您将新画布视为另一个图像，并可以将其复制到原始画布

ctx.drawImage(canvasBack,0,0);

渲染图像是在硬件中完成的，因此可以在每帧多次实时轻松完成。因此，您可以将画布视为图层（如 photoshop）并使用 globalCompositeOperation 创建范围广泛的可调整 FX。

您可以转换为 dataURL，但这是一个慢得多的过程，并且不足以进行实时渲染。同时保留 DataURL 字符串的副本，然后将其解码为图像会比仅创建画布副本（base64 在每 4 个字符中编码 3 个字节（24 位）。因为 JS 字符是 16 位长的存储数据）对内存造成更大的压力在 base64 中效率非常低（64 位内存用于存储 24 位）

另一种方法是使用 ctx.getImageData 将画布存储为类型化数组，但这也很慢，无法处理实时需求。