画像オーバーレイ

画像オーバーレイの概要

VideoBuffでは動画の上に画像をレイヤーとして重ねて表示できます。ロゴやウォーターマーク、装飾的なグラフィック、フレームなど、さまざまな用途で画像オーバーレイを活用できます。

13種類のブレンドモードにより、単純な重ね合わせだけでなく、映像と画像を芸術的に合成することも可能です。不透明度やドロップシャドウ、角丸などのエフェクトも用意されており、細かいビジュアル表現を実現できます。

画像のインポートと配置

JPG、PNG、WebP、GIF形式の画像をインポートできます。画像をメディアパネルからタイムラインの画像トラックにドラッグして配置します。画像クリップの長さをドラッグで調整することで、表示時間を制御できます。

PNG画像のアルファチャンネル（透過）はそのまま保持されるため、透過背景のロゴやグラフィックをそのまま使用できます。GIFアニメーションも対応しており、動くスタンプやエフェクトとしても活用できます。

トランスフォーム

画像の位置はX/Y座標で指定でき、正規化された値（0〜1）を使用します。回転は角度で指定でき、360度の自由な回転が可能です。

スケールは0%から200%の範囲で調整でき、元のサイズを基準に拡大・縮小できます。不透明度は0%（完全に透明）から100%（完全に不透明）まで設定でき、半透明のウォーターマークなどに便利です。

クロップ機能で画像の一部だけを表示することもできます。

ブレンドモード

13種類のブレンドモードが利用可能です。Normal（通常合成）は画像をそのまま重ねます。Multiply（乗算）は暗い部分を強調し、影の追加やテクスチャの重ね合わせに適しています。

Screen（スクリーン）は明るい部分を強調し、光やフレア効果に最適です。Overlay（オーバーレイ）はコントラストを強調し、映像に質感やテクスチャを追加する際に使われます。

その他にもDarken、Lighten、Color Dodge、Color Burn、Hard Light、Soft Light、Difference、Exclusion、Hueが用意されており、クリエイティブな映像表現が可能です。

ドロップシャドウと角丸

ドロップシャドウ機能を有効にすると、画像に影を追加して浮き上がった印象を与えられます。影の色、ブラー量、X/Yオフセットをそれぞれ調整可能です。白い背景の画像に微妙な影を付けることで、映像上での視認性を高める使い方が特に効果的です。

角丸（Border Radius）は0%から50%の範囲で設定でき、50%にすると完全な円形になります。プロフィール画像やサムネイルを丸く表示したい場合に活用できます。

技術解説：画像合成の仕組み

ブレンドモードの実装にはCanvas 2DのglobalCompositeOperationプロパティを使用しています。これにより、ブラウザがネイティブにサポートする合成モードを利用した高速なレンダリングが可能です。

書き出し時にはOffscreenCanvas上で同じ合成操作を再現し、プレビューと一致した出力を保証します。ドロップシャドウはCanvasのshadow APIで、角丸はclipメソッドとarcメソッドの組み合わせで実装されています。

これらの処理はすべてGPUアクセラレーションの恩恵を受けるため、複数の画像オーバーレイがあってもスムーズな再生が可能です。