JavascriptとCanvas要素を使った奇妙な画像動作

Question

canvas要素のtoDataURL呼び出しの出力を利用しようとしています。

var snapshotjig = document.getElementById("snapParent"); 
var testOutput = document.createElement('canvas'); 
var ctxtest = testOutput.getContext('2d'); 
var imageTest = new Image(); 
var canvas = capture(video, scaleFactor);  

imageTest.src = canvas.toDataURL(); 
ctxtest.drawImage(imageTest,0,0,imageTest.width, imageTest.height); 
snapshotjig.appendChild(testOutput); 

完了をキャプチャコードは次のようになります。HTMLで

function capture(video, scaleFactor) { 
    if(scaleFactor == null){ 
     scaleFactor = 1; 
    } 
    var w = video.videoWidth * scaleFactor; 
    var h = video.videoHeight * scaleFactor; 
    var canvas = document.createElement('canvas'); 
     canvas.width = w; 
     canvas.height = h; 
    var ctx = canvas.getContext('2d'); 
     ctx.drawImage(video, 0, 0, w, h); 
    return canvas; 
} 

ID "snapParent" とdiv要素があります。 キャプチャ機能は正常に機能しているようですが、toDataUrlを使用してその出力を描画しようとすると、div要素snapParentの画像の一部が表示されます。 これが何を引き起こしているのか、私が間違っていることがわかりません。

これについてのご意見は大変ありがたいです。私はtoDataUrlを使用して画像を取得し、インタラクティブなジグソーパズルに変換する関数で使用するようにしています。このコードは現時点でURLをとり、toDataUrl出力を置き換えることは簡単です。なぜ私のイメージが切り取られているのか理解できません。

Answer 1

また、私が使用していたブラウザのデフォルトが使用されているため、testOutputを使用していたキャンバスの幅と高さが設定されていないことが判明しました。画像。コンテクストはサイズを設定する場所ではありませんが、Pointyの提案は、キャンバスの寸法設定、声援の芽を再び見せてくれました。

キャプチャメソッドを使用して、testOutputキャンバスサイズを設定します。

Answer 2

「ctxtest」キャンバスの幅と高さを設定していないかのように見えます。