javascript - 从 localStorage 保存和加载 Canvas 数据

Question

我需要保存我 Canvas 上的所有绘图，以便以后能够返回到它们。

我成功获取和放置数据，但我无法保存对象并正确返回它。

这是我的代码:

var imgData = a.getImageData(0, 0, 500, 200);
localStorage.setItem("test",JSON.stringify(imgData))
console.log(imgData)
console.log(JSON.parse(localStorage.getItem("test")))
b.putImageData(imgData, 0, 0);

Answer 1

您可以使用 canvas.toDataURL() 方法将 Canvas 编码为 Base64。

然后您可以创建一个图像，源是数据 url，然后将该图像绘制到 Canvas 上。

Here is the working sample.

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);

var url = canvas.toDataURL();

localStorage.setItem('url', url);

var canvas2 = document.getElementById('tutorial2');
var ctx2 = canvas2.getContext("2d");
var toDrawUrl = localStorage.getItem('url');

drawDataURIOnCanvas(toDrawUrl, ctx2);
ctx2.fillStyle = "rgb(200,200,0)";
ctx2.fillRect (20, 20, 55, 50);


function drawDataURIOnCanvas(strDataURI, context) {
    "use strict";
    var img = new window.Image();
    img.addEventListener("load", function () {
        context.drawImage(img, 0, 0);
    });
    img.setAttribute("src", strDataURI);
}