Question

我一直试图在使用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没有在画布上工作

Answer 1

localStorage只能节省这么多，即。在大多数浏览器中5 MB，在其他浏览器中少。

另一个需要注意的是，由于unicoding，每个存储的char占用2个字节，因此实际存储中实际存储量只有一半。不保证尺寸，因为标准没有定义 - 5 mb只是一个建议，因此浏览器可以使用任何尺寸。

您将图像作为PNG获取，因为这是toDataURL()的默认格式。如果生成的data-uri太大（这可能是base-64增加33％的大小+一个小标题），保存将截断或失败，具体取决于浏览器。

这很可能（因为你没有说明画布大小或结果数据-uri）当你试图重新加载数据时，为什么你的画布是空白的，因为它无效。

您可以尝试另存为JPEG格式：

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

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

<强>更新

还尝试将onload从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中。它涉及渲染阶段中的一些代码（当你出于某种原因因为空白而需要更新画布时），但这是值得的。

在页面加载之间保存画布

1 个答案: