从cookie加载画布数据的HTML
从cookie加载画布数据的HTML
提问于 2014-05-23 16:16:32
我遇到了一个问题，我试图从cookie加载画布数据，但是当我加载数据时，会发生以下错误。
Uncaught TypeError: Failed to execute 'putImageData' on 'CanvasRenderingContext2D': No function was found that matched the signature provided. 我要做的是在按下按钮时将画布数据保存到cookie中，然后按下另一个按钮，然后在画布上重新绘制数据。
if (document.getElementById('hdnSwitchButton').getAttribute("Value") == 0) {
canvas.style.zIndex = "-2";
} else if (document.getElementById('hdnSwitchButton').getAttribute("Value") == 1) {
canvas.style.zIndex = "0";
canvasRead = getCookie("canvas");
if (!canvasRead) {
alert('Error: Cannot read canvas!');
} else {
context.putImageData(canvasRead, 0, 0);
}
}这是我的初始化代码，它读取cookie并在行中发生错误：
context.putImageData(canvasRead, 0, 0);保存cookie时，这是我的代码：
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return "";
}
function BrowserButtonClick() {
document.getElementById('hdnSwitchButton').setAttribute('Value', 0);
canvasSave = context.getImageData(0, 0, aWidth, aHeight);
document.cookie = "canvas=" + canvasSave;
}我的html画布代码如下所示：
<div class="canvas">
<canvas id = "DrawingCanvas">
<p>Unfortunately, your browser is currently unsupported by our web application. We are sorry for the inconvenience. Please use one of the supported browsers listed below.</p>
<p>Supported browsers: <a href="http://www.google.com/intl/en_uk/chrome/browser/">Chrome</a>, <a href="http://www.opera.com">Opera</a>, <a href="http://www.mozilla.com">Firefox</a>, <a href="http://www.apple.com/safari">Safari</a>, and <a href="http://www.konqueror.org">Konqueror</a>.</p>
</canvas>
</div>我想知道为什么会发生这种情况，以及如何在没有问题的情况下从cookie加载画布，或者更有效地加载画布数据。
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-05-23 18:14:34
画布是由其imageData对象定义的。
imageData对象包含序列化和保存后重新绘制画布所需的所有内容。imageData是一个对象，但是imageData的重要部分是它的data属性，它包含一个数组，表示画布上的每个像素。
您可以通过在cookie中保存和还原此像素数组来重新加载画布。
但是..。
...having说，由此产生的曲奇可能很大--兆字节大。您可能需要考虑将画布像素保存为图像(使用canvas.toDataURL)，这样可以创建一个可以保存的较小的图像文件。
不管怎样，为了回答你的问题..。
演示：http://jsfiddle.net/m1erickson/c8Vnf/
Save
- 使用
context.getImageData获取定义画布的imageData对象。 - 像素内容存储在imageData对象(imageData.data)上的RGBA数据数组中。
- 使用
JSON.stringify将该数组转换为字符串 - 把那字符串保存成曲奇。
恢复
- 若要还原画布，请获取cookie字符串，然后将该字符串转换为带有
JSON.parse的数组。 - 使用
context.getImageData获取表示画布的imageData对象： - 用保存的像素数据填充imageData对象的像素数据数组：
- 使用imageData将修改后的
context.putImageData对象推回画布上
保存代码：
var imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
J=JSON.stringify(imgData.data);
// and save J as a cookie恢复代码：
var savedData=JSON.parse(J);
var imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
var data=imgData.data;
for(var i=0;i<data.length;i++){
data[i]=savedData[i];
}
ctx.putImageData(imgData,0,0);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23834014
复制相关文章
相似问题
腾讯云开发者
