在页面加载之间保存画布

Save Canvas between pageloads

本文关键字：保存 之间 加载      更新时间：2023-09-26

我一直试图使用html5本地存储在页面刷新之间保存画布，但刷新页面时画布总是变为空白。

HTML

            <canvas onload="loadCanvas()" onClick="canvas(event)" id="myCanvas"    width="400" height="400">
               Your browser does not support the canvas element
           </canvas>

Javascript：

function saveCanvas() {
var c = document.getElementById("myCanvas"),
    ctx = c.toDataURL();
if (typeof (localStorage) !== "undefined") {
    localStorage.setItem('myCanvas', ctx);
} else {
    document.getElementById("save").innerHTML.dataURL = "Local Storage not supported";
}
}
function loadCanvas() {
var image = localStorage.getItem('myCanvas');
document.getElementById('myCanvas').src = image;
}

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

有人知道问题出在哪里吗？

问题已经解决，onLoad在画布中不起作用

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

如果这不起作用，那么您需要研究其他本地存储机制，如Indexed DB（您可以在其中请求存储配额）或File API（但目前只有Chrome支持）。还有一种被弃用的Web SQL，它还会存在一段时间。

更新

同时尝试将您的加载从画布元素移动到窗口：

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

注意：不能在画布元素上设置src（正如这里代码中的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中。它在渲染阶段涉及到更多的代码（当画布由于某种原因被清空时，您无论如何都需要更新它），但这是值得的

相关文章：