ちゃなんログ

書き散らします。マラソンがしたいです。

Canvasタグを使って動画のキャプチャを作成する

なんです。
以前会社のエンジニアブログに投稿したことがあるのですが、転載が許可されたため、個人ブログにも書いておこうとおもいます。

動画の状態をCanvasタグに描画する処理なのですが、当時はjQueryを使用して作成していたので、なんとなくjavascriptのみで書き直しました。

<html>
  <head>
    <meta charset="utf-8">
    <script src="hoge.js"></script>                                                                                                 </head>
  <body>
    <video id="video" src="test.MOV" width="288" height="512" controls></video>
    <button id="capture" onclick="sample()">キャプチャー</button>
    <canvas id="canvas"></canvas>
  </body>
</html>

htmlはこんな感じです。videoタグを表示するだけのシンプルなものです。

function sample() {
  var video = document.getElementById('video');
  var canvas = document.getElementById('canvas');
  canvas.setAttribute('width', video.width);                                                                                        
  canvas.setAttribute('height', video.height);
  canvas.getContext('2d').drawImage(video, 0, 0, video.width, video.height);
}

実際にCanvasを操作するのがこちらのjsです。

canvas.getContext('2d').drawImage(video, 0, 0, video.width, video.height);

6行目のこの部分がCanvasへの描画を行なっています。drawImageの引数には注意が必要で

drawImage(対象video, canvasの描画スタートx座標, canvasの描画スタートy座標, 描画width, 描画height)

割とごちゃごちゃする部分だと思います。

このblog記事は、株式会社アドウェイズの記事（http://blog.engineer.adways.net/entry/2017/02/24/160000）を許可を得て転載したものです。（執筆者は当blog管理人自身です）