恢复已保存的画布始终失败并出现错误

Question

我有一个我正在使用的画布颜料应用程序，它使用鼠标点击进行绘制。很简单。 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行上获得错误控制台“Image corrupt or truncated”和“TypeError：Value not a object”。

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

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。感谢。

Answer 1

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

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

localStorage

将数据存储为键/值对。您可以将图像存储为数据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）。这取决于客户端。这对某些用户来说似乎有些干扰，因此首先向用户提出该应用首先要求的用户可能是一个好主意。