恢复保存的画布总是失败和错误答案

【问题标题】：restoring a saved canvas always fails and errors恢复保存的画布总是失败和错误
【发布时间】：2013-05-13 08:49:36
【问题描述】：

我正在开发一个使用鼠标点击来绘制的画布绘画应用程序。很简单。 mouseup 上有一个监听器，它保存当前绘图相对于 getImageData 并设置用户实际绘制的会话 cookie。片段：

var canvasData;
function save () {
  // get the data
  canvasData = context.getImageData(0, 0, canvas.width, canvas.height);
};

...

this.mouseup = function (ev) {
 if (tool.started) {
  tool.mousemove(ev);
  tool.started = false;
  save();
  document.cookie = 'redraw=true; path=/'
 }
};

我正在寻找的功能是让用户能够离开页面，然后返回页面，不缓存，让网站看到他们的 cookie，读取绘图并使用 putImageData 映射它。片段：

function restore () {
  // restore the old canvas
  context.putImageData(canvasData, 0, 0);
};

var checking = readCookie('redraw')
if (checking) {
  restore();
};

但是当我尝试这样做时，我在 putImageData 行上收到错误控制台显示“图像损坏或截断”和“TypeError：值不是对象”。

当我尝试将画布保存到内存时（保存到数据，绘制图像）：

var savedData = new Image();
function save () {
savedData.src = canvas.toDataURL("image/png");
};
function restore () {
context.drawImage(savedData,0,0);
};

我收到“NS_ERROR_NOT_AVAILABLE：组件不可用”和“访问属性 'toString' 的权限被拒绝”。有人知道我在做什么错吗？我会把它放在 jsfiddle 上，但在这种情况下，它不会那么有效，所以 here's the full。谢谢。

【问题讨论】：

你在哪里保存画布数据到cookie？根据问题中的代码，您所做的就是保存值redraw=true。
我没有将画布数据保存到 cookie。 cookie 只是用来确定页面是否会加载画布数据。画布数据被保存为 getImageData/putImageData 和 var canvasData 的一部分。
但是您将canvasData 变量保存在哪里？您确实意识到重新加载页面时脚本状态被清除并且所有旧变量值都丢失了？
我没有。我假设这两种方法都是持久的。您是说我应该将 canvasData var 作为 cookie 传递，并将其用作存储并确定用户是否在页面上？
如果 JS 变量是持久的，那么根本不需要 cookie :) 无论如何，我怀疑它的信息太多而无法放入 cookie；我会调查localStorageinsted。

标签： javascript html html5-canvas

【解决方案1】：

Cookie 的大小太有限，因此当您向它们存储数据时，数据将被截断，它超过了大约 4 kb 的限制——这对于 base64 编码的图像（数据 url）来说并不算多。

现代客户端（浏览器）支持更新的存储方法。您可以在主要浏览器中使用以下存储机制（请参阅每个部分下的链接了解哪些浏览器支持什么）：

localStorage

将数据存储为键/值对。如果更方便，您可以将图像存储为 Data Url 或保存包含数据的数组。

这个接口是同步的。

（还有localSession，用于临时存储）。

客户支持：
http://caniuse.com/#search=localstorage

对于你描述的这个接口的用法可能是最简单的（如果你经常存储你可能会更喜欢异步接口），例如：

localStorage[myKey] = 'myData';
var myData = localStorage[myKey];

indexedDB

稍微复杂一点，但您可以将数据存储为Blob 对象。

这个接口是异步的。

客户支持：
http://caniuse.com/#search=indexeddb

示例：
http://www.html5rocks.com/en/tutorials/indexeddb/todo/

file API

目前仅在 Chrome 中支持；用作具有目录等的文件系统。在这里，您将所有内容都存储为 blob

这个接口是异步的。

客户支持：
http://caniuse.com/#search=filesystem

示例：
http://www.html5rocks.com/en/tutorials/file/dndfiles/

Web SQL

已正式弃用，但仍在使用（并将持续一段时间）用于 Safari 和 IIRC Opera 等浏览器。 Chrome 也有支持，但不支持 Firefox 和 IE。

这个接口是异步的。

客户支持：
http://caniuse.com/#search=websql

示例：
http://html5doctor.com/introducing-web-sql-databases/

userData

旧 IE 版本支持 userData。尽管在不止一种意义上，这个 API 还是有一些限制。

Cookies

Cookie 会随每个请求一起发送到服务器，因此 Cookie 越大，通信速度就越慢。它们限制为 4 kb。

请注意，对于其中某些接口，客户端可能会或可能不会要求用户允许在其计算机中存储数据 - 通常如果您请求超过 5 MB（Web SQL，indexedDB）。不过，这取决于客户。这对某些用户来说似乎是一种干扰，因此提醒用户应用程序会首先要求这样做是个好主意。

【讨论】：