Javascript 在页面加载之间保存画布

我一直在尝试使用html5本地存储在页面刷新之间保存画布，但是当我刷新页面时，画布总是返回空白

HTML

在画布中绘制某些内容时调用saveCanvas函数

有人知道问题出在哪里吗

---

问题已经解决，onLoad在canvas中不起作用，localStorage只能节省这么多，即在大多数浏览器中节省5 mb，而在其他浏览器中则更少

另一个警告是，由于unicoding，存储的每个字符占用2个字节，因此实际上存储空间仅为实际意义上的一半。没有关于大小的保证，因为这不是标准定义的-5 mb只是一个建议，所以浏览器可以使用任何大小

您将以PNG格式获取图像，因为这是

toDataURL（）

的默认格式。如果生成的数据uri太大（这里可能是因为base-64将大小加上33%加上一个小标题），则保存将被截断或失败，具体取决于浏览器

这很可能是（因为您没有说明画布的大小或生成的数据uri）在尝试重新加载数据uri时画布为空的原因，因为它将无效

您可以尝试另存为JPEG：

dataUri = c.toDataURL('image/jpeg', 0.5); /// 0.5 is quality, higher is better

如果这不起作用，那么您需要研究其他本地存储机制，如索引数据库（您可以在其中请求存储配额）或文件API（但目前只有Chrome支持）。还有一种不推荐使用的Web SQL，它还将存在一段时间

更新

同时尝试将onload从画布元素移动到窗口：

window.onload = function() {
    var image = localStorage.getItem('myCanvas');
    document.getElementById('myCanvas').src = image;
}

注意：不能在画布元素上设置

src

（此处代码的ID以及示例代码显示的ID）。你需要一个图像元素。在图像上设置

src

时，还需要在图像上使用

onload

处理程序，例如：

window.onload = function() {
    var img = new Image;
    img.onload = function() {
        var ctx = document.getElementById('myCanvas').getContext('2d');
        ctx.drawImage(img, 0, 0);
        /// call next step here...
    }
    img.src = localStorage.getItem('myCanvas');
}

---

通常我建议（在本线程中，其他人也这样做了）人们将其图形作为点和形状类型存储在数组中作为对象，然后将其序列化为字符串，而将其存储在localStorage中。它在渲染阶段包含了更多的代码（不管怎样，当画布因某种原因被清空时，您需要更新画布），但这是值得的。

我不认为大小是问题所在，尽管我只是想在画布上保存一个示例2-3个单色小圆圈。在控制台中，我看到is已保存到本地存储，但它没有加载，我的代码中是否有错误？即使您正在绘制的内容并不复杂，但如果图形的大小较大，它可能会占用本地存储中的大量空间。你应该看看@markE的建议，尤其是如果你的画很简单的话并将其重新加载到画布上，我得到一个反向图像（所有透明的东西都变黑了，笔划是透明的。这应该是这样吗？你在画布上画什么？也许你可以序列化绘图命令，而不是将画布保存为图像。我真的希望将它们保存为图像，没有问题，只是将图像加载回canv在页面重新加载之后

window.onload = function() {
    var image = localStorage.getItem('myCanvas');
    document.getElementById('myCanvas').src = image;
}

window.onload = function() {
    var img = new Image;
    img.onload = function() {
        var ctx = document.getElementById('myCanvas').getContext('2d');
        ctx.drawImage(img, 0, 0);
        /// call next step here...
    }
    img.src = localStorage.getItem('myCanvas');
}