キャンバスから別のキャンバスにデータをコピーする方法

キャンバスは任意の数のフォームがあります。一度記入したら、それを他のキャンバスにコピーしたいと思います。キャンバスから別のキャンバスにデータをコピーする方法

私は現在、1 canvaseが、私はその後

sourceCanvas = $(this).find('canvas')[0];

たときに、次のいずれかの負荷（彼らはモーダルである）

私のようなそれを移入しようとキャンバスデータを保存

を閉じている

この

var destCtx = $(this).find('canvas')[0].getContext('2d'); 
destCtx.drawImage(sourceCanvas, 0, 0);

このエラーが発生しました

キャッチされない

TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

は（ 'キャンバス'）[0]間違ったことをつかむことですか？私はキャンバス要素の中に別のものを手に入れなければなりませんか？

ありがとうございます！

出典

2017-03-18 Chuck Niddy

私はあなた 'this'は、あなたが完全なコードだけではなく作品を提供することができれば、私たちはあなたよりよく助けることができるかもしれませんあなたは – Psi

を期待する場所を指していないに違いありません。私にとっては、 'sourceCanvas'がdrawImageを呼び出すときにスコープの外にあるかsmthのように思えます（drawImageはCanvasRenderingContext2Dなので、正しく設定されているようです） – faboolous

-1

When one canvase is closed I save the canvas data

sourceCanvas = $(this).find('canvas')[0];

あなたのコードはソースキャンバスの画像データにアクセスしていないと思います。ソースキャンバスのコンテキストでgetImageData()を呼び出し、宛先キャンバスのコンテキストでputImageData()というコールを取得します。以下は、canvas1の画像データをcanvas1（画像の別の場所）とcanvas2の両方にコピーする簡単な例です。

また、この優れたテキストはHTML5 Canvasでチェックしてください。

<html> 
<body> 

<canvas id="canvas1" width="300" height="150" style="border:1px solid #f00;">no canvas</canvas> 

<canvas id="canvas2" width="300" height="150" style="border:1px solid #00f;">no canvas</canvas> 


<script> 
var c1 = document.getElementById("canvas1"); 
var c2 = document.getElementById("canvas2"); 
var ctx1 = c1.getContext("2d"); 
var ctx2 = c2.getContext("2d"); 
ctx1.fillStyle = "red"; 
ctx1.fillRect(10, 10, 50, 50); 

function copy() { 
    var imgData = ctx1.getImageData(10, 10, 50, 50); 
    ctx1.putImageData(imgData, 10, 70); 
    ctx2.putImageData(imgData, 10, 70); 
} 
</script> 

<button onclick="copy()">Copy</button> 

</body> 
</html>

出典

2017-03-18 05:48:12

キャンバスから別のキャンバスにデータをコピーする方法

答えて

関連する問題