Skip to content

video, img, canvas 間で画像データを変換する

画像のデータ形式を適切に変換することで、ある要素で表示している画像を別の要素へ表示することができます。

たとえば、<video> で再生中の動画のキャプチャを <img> に表示し、それをユーザーにダウンロードさせる、などといったことができるようになります。

<canvas>への描画

<canvas> へ描画するときのポイントは次の3つです。

  • 描画先の <canvas> のコンテキストを取得
  • 描画先の <canvas> に幅と高さを指定
  • コンテキストの drawImage() メソッドに、描画元の要素を渡す

まず、コンテキストというのは、<canvas> に描画するためのメソッドが詰まったオブジェクトのことです。

このコンテキストの drawImage() メソッドを使うことで、<img>や <video>、<canvas> に表示されている画像を描画できます。

drawImage() メソッドの代表的な文法は、次のようになっています。

image には、<image>, <video>, <canvas> などを渡します。

x, y には、描画する画像の左上の座標を指定します。ここは基本的に 0, 0 を指定することになると思います。

そして width, height に指定するのは画像の幅と高さです。

参考:https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/drawImage

<canvas> のデフォルトサイズは横 300px 縦 150px なので、描画したい画像のサイズに合わせるため、width, height を更新する必要があります。そのため、drawImage() メソッドを使う前に描画元の画像の幅と高さを取得しでおきましょう。

描画元が <video> の場合は videoWidth, videoHeight、<img> の場合は width, height で取得できます。

<img>への描画

<img> へ描画するときのポイントは次の3つです。

  • 描画元の要素を一度 <canvas> へ描画
  • <canvas> の toDataURL() メソッドで画像を DataURL に変換
  • <img> の src 属性に DataURL を渡す

DataURL という形式の文字列を src 属性に渡すことで <img> で表示できます。

この DataURL を取得するのに <canvas> の toDataURL() メソッドを利用したいので、まずは変換元のデータを一度 <canvas> にしておきます。

そして、変換した <canvas> から DataURL を取得し、<img> の src 属性に渡します。

なお、toDataURL() メソッドの代表的な文法は、次のとおりです。

type には、画像の形式を指定します。

このとき、デフォルトでは type が image/png となりますが、image/jpeg を指定することも可能です。image/jpeg を指定した場合、第二引数で画質を指定することができます。

jpeg にすることで画像サイズを節約できる場合がありますが、png と比べどうしても画質は下がってしまいますので、生成した画像を解析するなど、画質が要求されるような場合デフォルトのままにしておくことをオススメします。

ちなみに画質の劣化具合を調べるため OCR(光学的文字認識)の検証をしてみましたが、png の場合、元の <canvas> を解析するのとまったく同じ結果を得ることができました。

参考:https://developer.mozilla.org/ja/docs/Web/API/HTMLCanvasElement/toDataURL

サンプル

次のサンプルでは、3つの変換を行っています。

  • <video> → <canvas>
  • <canvas> → <img>
  • <img> → <canvas>

なお、<video> の再生のために、デバイスのカメラから映像を取り込んでいます。そのためブラウザによっては HTTPS か localhost の環境でないと利用できない場合があります、実際に試される方はご注意下さい。

index.html

script.js

Comments are closed.