[解決済み] あるキャンバスの内容をローカルに別のキャンバスにコピーする方法

質問

あるキャンバスのすべてのコンテンツをコピーして、クライアント側で別のキャンバスに転送したいのです。私は、私が canvas.toDataURL() と context.drawImage() メソッドを使用して実装していますが、いくつかの問題に遭遇しています。

私の解決策は Canvas.toDataURL() を取得し、これをJavascriptのImageオブジェクトに格納し、その上で context.drawImage() メソッドで元に戻します。

しかし、私は toDataURL メソッドは64ビットでエンコードされたタグを返します。 "data:image/png;base64," が付加されています。これは有効なタグではないようですが (これを削除するために RegEx を使うことはできます)、64 ビットのエンコードされた文字列は "data:image/png;base64," の後にある64ビットでエンコードされた文字列は、有効な画像なのでしょうか？私は次のように言うことができますか？ image.src=iVBORw...ASASDAS と言って、これをキャンバスに描き戻すことはできますか？

関連する問題を調べてみました。 キャンバス画像をあるキャンバスから別のキャンバスに base64 を使って表示する

しかし、解決策は正しくないようです。

どのように解決するのですか？

実は、画像を作成する必要は全くないのです。 drawImage() は Canvas と同じように Image オブジェクトを生成します。

//grab the context from your destination canvas
var destCtx = destinationCanvas.getContext('2d');

//call its drawImage() function passing it the source canvas directly
destCtx.drawImage(sourceCanvas, 0, 0);

を使うよりずっと速いです。 ImageData オブジェクトや Image 要素で構成されます。

なお sourceCanvas は HTMLImageElement , HTMLVideo 要素 または HTMLCanvasElement . で述べたように デイブ がこの答えの下のコメントで述べているように、あなたは キャンバスの描画コンテキストをソースとして使用することはできません。 . canvas 要素の代わりに canvas 描画コンテキストを作成した場合、コンテキスト上の元の canvas 要素への参照は、以下のようになります。 context.canvas .

なぜこれがcanvasを複製する唯一の正しい方法なのかを示すjsPerfを以下に示します。 http://jsperf.com/copying-a-canvas-element