Javascript 从Cookie加载画布数据的HTML

我遇到了一个问题，我试图从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;
}

函数getCookie（cname）{
变量名称=cname+“=”；
var ca=document.cookie.split（“；”）；
对于（变量i=0；i

我的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>

不幸的是，我们的web应用程序当前不支持您的浏览器。给您带来不便，我们深表歉意。请使用下列受支持的浏览器之一

支持的浏览器：、和

---

我想知道的是为什么会发生这种情况，以及如何从cookie中加载画布，而不会出现任何问题，或者更有效地加载画布数据。

您的画布由其

imageData

对象定义

imageData对象包含序列化和保存画布后重新绘制画布所需的所有内容。imageData是一个对象，但imageData的重要部分是它的

data

属性，该属性包含一个表示画布上每个像素的数组

您可以通过在cookie中保存和恢复此像素阵列来重新加载画布

但是

…话虽如此，生成的cookie可能很大--兆字节大。您可能需要考虑将画布像素保存为图像（使用CavaS.toDATAURL），从而创建可以保存的较小的图像文件。p> 无论如何，要回答你的问题

演示：

保存

• 使用

  context.getImageData

  获取定义画布的imageData对象

• 像素内容存储在imageData对象（imageData.data）上的RGBA数据数组中

• 使用

  JSON.stringify将该数组转换为字符串
  

• 将该字符串另存为cookie

恢复

• 要恢复画布，请获取cookie字符串，然后使用

  JSON.parse将该字符串转换回数组
  

• 使用

  context.getImageData

  获取表示画布的imageData对象：

• 用保存的像素数据填充imageData对象的像素数据数组：

• 使用

  上下文将修改后的imageData对象推回到画布上。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);

var savedData=JSON.parse（J）； var imgData=ctx.getImageData（0,0，canvas.width，canvas.height）； var数据=imgData.data； 对于（var i=0；i