0

我有一个我正在使用的画布绘画应用程序，它使用鼠标点击来绘制。很简单。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 上，但在这种情况下，它不会那么有效，所以这里是完整的. 谢谢。

4

1 回答 1

0

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

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

本地存储

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

这个接口是同步的。

（也有localSession用于临时存储的）。

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

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

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

索引数据库

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

这个接口是异步的。

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

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

文件 API

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

这个接口是异步的。

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

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

网络 SQL

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

这个接口是异步的。

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

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

用户数据

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

饼干

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

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

于 2013-05-19T05:47:27.327 回答