javascript - 在页面加载之间保存 Canvas

Question

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

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;
}

当在 Canvas 上绘制某些内容时，会调用 saveCanvas 函数

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

已解决，onLoad在canvas中不起作用

Answer 1

localStorage 只能保存这么多，即。在大多数浏览器中为 5 mb，在其他浏览器中则更少。

另一个需要注意的是，由于 unicode 的原因，每个存储的字符占用 2 个字节，因此实际意义上的存储量实际上只是其中的一半。对于大小没有任何保证，因为标准没有定义 - 5 mb 只是一个建议，因此浏览器可以使用任何大小。

您将获取 PNG 格式的图像，因为这是 toDataURL() 的默认格式。如果生成的 data-uri 太大(这里可能是因为 base-64 增加了 33% 的大小 + 一个小 header )，则保存将被 chop 或失败，具体取决于浏览器。

这很可能(因为您没有说明 Canvas 的大小或生成的数据 uri)为什么当您尝试重新加载数据 uri 时 Canvas 为空白，因为它会无效。

您可以尝试另存为 JPEG:

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

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

更新

还尝试将加载从 Canvas 元素移动到窗口:

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

注意:您无法在 Canvas 元素上设置 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 中。它在渲染阶段涉及更多的代码(无论如何，当 Canvas 因某种原因被空白时，您都需要更新 Canvas )，但这是值得的。