Javascript Canvasシリアル化/逆シリアル化？

Question

javascriptでキャンバスオブジェクトをシリアライズ/デシリアライズできますか？

Answer 1

canvas.getImageData（）および.putImageData（）を使用してピクセルに直接アクセスできます。 canvas.toDataURL（）を使用してイメージをデータURLにシリアル化して、サーバーにポストすることもできます。

これは新しいブラウザでのみ機能します。

Answer 2

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

私の記憶が正しければ、一部の古いサファリのバージョン、および多分OperaはtoDataURLをサポートしていませんでしたが、最近のバージョン行う。