HTML5 - 在文件之间传递 Canvas

Question

我有两个 html 文件，比如 1.html 和 2.html，其中 1.js 和 2.js 引用了 javascripts。在 1.html 中，我有一个具有拖放功能的 Canvas 对象，因此我使用 drawImage 方法向画布添加其他图像。当我在 1.html 上添加完图像后，我将画布保存到 localStorage。很快就会变成这样：

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

ctx.drawImage(imageObj, x, y, imageObj.width, imageObj.height);
ctx.drawImage(imageObj2, x2, y2, imageObj2.width, imageObj2.height);

localStorage.setItem("context1", ctx);  // Unsure if i should save context or canvas

现在，在 2.html 中，我想检索保存在 1.html 画布中并在 1.html 上设置/应用它，所以我喜欢：

var savedContext = localStorage.getItem("context1");

var canvas1 = document.getElementById('canvas1');
var context1 = savedContext;

而且我没有得到任何结果，我什至不知道是否有可能像那样通过画布上绘制的所有图像，或者也许有其他方法可以这样做

Answer 1

您可以通过保存数据 url 而不是尝试保存画布或上下文来做您想做的事情：

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

ctx.drawImage(imageObj, x, y, imageObj.width, imageObj.height);
ctx.drawImage(imageObj2, x2, y2, imageObj2.width, imageObj2.height);

localStorage.setItem("imageData", canvas.toDataUrl());

稍后再恢复：

var img = document.createElement('img');
img.src = localStorage.getItem("imageData");

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

ctx.drawImage(img, x, y, img.width, img.height);

您可能还必须等待 img 上的“onload”事件触发，然后才能在画布上绘制它，但我不确定。

Answer 2

我认为这不是正确的方法。 原因：localstorage API 只保留字符串键值对。因此，您需要画布元素的字符串表示形式。

看这里：

Javascript Canvas Serialization/Deserialization?