あるキャンバスのコンテンツをローカルで別のキャンバスにコピーする方法

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

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

ただし、このtoDataURLメソッドは64ビットのエンコードされたタグを"data:image/png;base64,"前に付加して返すと思います。これは有効なタグではないようです（常に一部のRegExを使用してこれを削除できます）が、その64ビットのエンコードされた文字列は、"data:image/png;base64,"サブストリングの後に有効なイメージですか？と言ってimage.src=iVBORw...ASASDAS、これをキャンバスに描画できますか？

私はいくつかの関連する問題を見てきました： base64を使用してキャンバス画像をあるキャンバスから別のキャンバスに表示します

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

実際、画像を作成する必要はまったくありません。オブジェクトだけでなくもdrawImage()受け入れます。CanvasImage

//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、HTMLVideoElement、またはHTMLCanvasElement。で述べたようにデーブこの回答以下のコメントで、あなたはあなたのソースとしてコンテキストを描画キャンバスを使用することはできません。作成元のcanvas要素の代わりにcanvas描画コンテキストがある場合、のコンテキストにある元のcanvas要素への参照がありますcontext.canvas。

これが、なぜこれがキャンバスを複製する唯一の正しい方法であるかを示すjsPerfです：http : //jsperf.com/copying-a-canvas-element

@ robert-hurstには、よりクリーンなアプローチがあります。

ただし、このソリューションは、コピー後に実際にデータURLのコピーが必要な場合にも使用できます。たとえば、多くの画像/キャンバス操作を使用するWebサイトを構築している場合です。

    // select canvas elements
    var sourceCanvas = document.getElementById("some-unique-id");
    var destCanvas = document.getElementsByClassName("some-class-selector")[0];

    //copy canvas by DataUrl
    var sourceImageData = sourceCanvas.toDataURL("image/png");
    var destCanvasContext = destCanvas.getContext('2d');

    var destinationImage = new Image;
    destinationImage.onload = function(){
      destCanvasContext.drawImage(destinationImage,0,0);
    };
    destinationImage.src = sourceImageData;