jquery - jQueryでHTML5キャンバス要素をディープクローンできますか?

Question

HTML5 キャンバス要素の複製に関するこの SO 投稿を見ました。

jQuery を使用してディープ クローン (つまり、 $(canvas).clone(true) ) を実行しようとしましたが、画像データはコピーされないようでした。

これはjQueryでは不可能ですか?

Answer 1

添付されたイベント ハンドラーをコピーする必要がない場合 (一般に、これが可能であるとは思えません)、現在受け入れられているソリューションを使用して、あるキャンバスから別のキャンバスに base64 を使用してキャンバス イメージを表示します。

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

もちろん、最初に宛先キャンバスを作成する必要があるため、その前に次のことを行う必要があります。

var destinationCanvas    = document.createElement('canvas');
destinationCanvas.width  = sourceCanvas.width;
destinationCanvas.height = sourceCanvas.height;