javascript - HTML 从 cookie 加载 Canvas 数据

Question

我遇到了一个问题，我试图从 cookie 加载我的 Canvas 数据，但是当我加载数据时发生以下错误。

Uncaught TypeError: Failed to execute 'putImageData' on 'CanvasRenderingContext2D': No function was found that matched the signature provided. 

我想做的是在按下一个按钮时将 Canvas 数据保存到 cookie，然后在按下另一个按钮时我想读取并在 Canvas 上重绘此数据。

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 Canvas 代码如下:

                        <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 加载我的 Canvas 而不会出现问题，或者更好但更有效的加载 Canvas 数据的方法。

Answer 1

您的 Canvas 由其 imageData 对象定义。

imageData 对象包含在序列化和保存后重新绘制 Canvas 所需的一切。 imageData 是一个对象，但 imageData 的重要部分是它的 data 属性，它包含一个代表 Canvas 上每个像素的数组。

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

但是...

...话虽如此，生成的 cookie 可能很大——兆字节大。您可能需要考虑将 Canvas 像素保存为图像(使用 canvas.toDataURL)，这会创建一个您可以保存的较小图像文件。

无论如何，回答你的问题......

演示:http://jsfiddle.net/m1erickson/c8Vnf/

保存

• 使用 context.getImageData 获取定义 Canvas 的 imageData 对象。

• 像素内容存储在 imageData 对象 (imageData.data) 的 RGBA 数据数组中。

• 使用JSON.stringify

  将该数组转换为字符串

• 将该字符串保存为 cookie。

恢复

• 要恢复 Canvas ，请获取 cookie 字符串，然后使用 JSON.parse 将该字符串转换回数组。

• 使用 context.getImageData 获取表示 Canvas 的 imageData 对象:

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

• 使用 context.putImageData 将修改后的 imageData 对象推回到 Canvas 上:

保存代码:

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);