Canvas API｜画像を描き、画素を扱う

Canvas APIは、ブラウザの中に画像を描くための場所を用意し、JavaScriptから内容を変えられる仕組みです。図形や画像だけでなく、映像の一場面を描くこともできます。

ブラウザの中で画像を描く

Webページには、描画用の領域としてHTMLのcanvas要素を置けます。JavaScriptから2D用の描画機能を取り出すと、線を引く、画像を置く、画素を調べるといった操作ができます。この2D描画機能の名前がCanvasRenderingContext2Dです。

画像や映像をCanvasへ写すときはdrawImage()を使います。video要素も描画元にできるため、カメラ映像の一場面を画像として扱えます。

描いた画像は、色を表す小さな点である画素ごとに読み取れます。getImageData()で画素を読み取り、色の計算や比較をしたあと、putImageData()で書き戻せます。

完成した描画内容は、toBlob()やtoDataURL()を使って画像データへ変換できます。

別のWebサイトから読み込んだ画像には、ブラウザの安全上の制限がかかる場合があります。読み込み元が利用を許可するCORSという設定がない状態で描くと、Canvasの画素を読み取ったり保存したりできなくなることがあります。

映像から細い帯を切り出し、位置をずらしながら一枚のCanvasへ順番に描くと、場所ごとに異なる時点の映像を組み合わせられます。

複数の画像をCanvasへ描き、対応する画素の明るさや色を比較すれば、変化が大きい部分だけを残す処理も作れます。

どちらも同じCanvas APIを使いますが、一方は描画位置を変えながら画像を合成する処理、もう一方は画素データを数値として比較する処理です。

Canvas APIはカメラへのアクセスや3D空間の管理を直接担当しません。カメラ映像の取得にはMedia Capture and Streams API、3D表示にはThree.jsなど、役割の異なる仕組みを組み合わせられます。