将画布绘图存储在本地存储中并显示为图像？ (javascript)

Question

我想将画布绘图存储在本地存储中，然后使用 javascript 显示为图像??

帮助 med 了解如何最好地存储画布，然后将其显示为图像！ 我正在寻找的结果是一个绘画画廊，您可以在其中查看您以前的所有画作。

任何提示都会有帮助！

Answer 1

您的问题可以通过将一个画布复制到另一画布来说明，因为您可以随时通过

localStorage.setItem('canvasdata', sourceImageData)

（请参阅下面的脚本）毫无问题地保存数据，然后在重新加载后将其加载为

localStorage.getItem('canvasdata')

。

function draw() {
  const canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    const ctx = canvas.getContext("2d");

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}

draw();

var sourceCanvas = document.getElementById("canvas");
var destCanvas = document.getElementById("canvas2");

//copy canvas by DataUrl
var sourceImageData = sourceCanvas.toDataURL("image/png");
var destCanvasContext = destCanvas.getContext('2d');

var destinationImage = new Image;
destinationImage.onload = function(){
    destCanvasContext.drawImage(destinationImage,0,0);
};
destinationImage.src = sourceImageData;

<canvas id="canvas"></canvas>
<hr>
<canvas id="canvas2"></canvas>