javascript - Javascript Canvasのシリアル化/逆シリアル化？

Question

javascriptでcanvasオブジェクトをシリアル化/逆シリアル化できますか？

Answer 1

getImageDataメソッド以外にcanvas.toDataURL()、データ URL エンコードされた PNG を取得するために使用できます。文字列にシリアル化する必要がある場合は、生データを手動で文字列に変換する必要がなくなります。画像を作成し、src をデータ URL に設定してからキャンバスに描画することで、逆シリアル化できます。

[非同期ロードを考慮して編集 (olliej による提案)]

function serialize(canvas) {
    return canvas.toDataURL();
}

function deserialize(data, canvas) {
    var img = new Image();
    img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        canvas.getContext("2d").drawImage(img, 0, 0);
    };

    img.src = data;
}

私の記憶が正しければ、古いバージョンの Safari や、おそらく Opera は をサポートしていませんでしtoDataURLたが、最近のバージョンではサポートしています。