Question

動的に作成されたビデオ要素からキャンバスに画像を描画しようとしています。私はいくつかのスタックオーバーフローを調べて、いくつかの解決策は、ビデオタグに "preload =" auto "を追加するか、ビデオのフォーマットをmp4からoggに切り替えるものでした。しかし、私のためにこれらの作業のどちら：ここ

はindex.ejsで私のコードです：ここでは

<video id='current_vid' width="640" height="480" controls preload="auto"> 
</video> 
<canvas id='canvas' width="200px" height="150px" style="border:2px solid black"></canvas> 

は私script.jsで私のコードです：

let canvas,ctx; 
window.onload = function(){ 
    $('#current_vid').attr('src','videos/sample.mp4'); //i have tried with ogg video as well 
    canvas = document.getElementById('canvas'); 
    ctx = canvas.getContext("2d"); 
    let video_a = thumbnail(document.getElementById("current_vid"));  
} 

function thumbnail(video) { 
    ctx.drawImage(video, canvas.width, canvas.height); 
} 

DOMはキャンバスを示し要素が存在します（境界線を見ることができ、それは私の開発ツールにありますが、ビデオの画像データは実際にキャンバス内に配置されません）

コメントする必要があります情報。ありがとうございました。 MDNから

Answer 1

、drawImage関数パラメータは画像/キャンバスの大きされない： 要するにvoid ctx.drawImage(image, dx, dy);

を参照して、DX及びDYは、画像のサイズが、宛先Xはなく、Y座標。あなたはキャンバスの外にあなたのイメージを描いています。 ctx.drawImage(video, 0, 0);