ライト/ダーク画像コンバイナー — 白背景と黒背景で1枚のPNGに
ライトモード用とダークモード用の画像を、1枚の透過PNGに合成します。白い背景では明るい方のアートワーク、黒い背景では暗い方のアートワークが表示されます。2枚をアップロードして結果を並べてプレビューし、ドキュメント・README・UI 向けのテーマ対応素材として1ファイルだけをダウンロード。すべてブラウザ内で完結します。
ライト/ダーク画像コンバイナーの機能
1枚のPNGで2つの見え方
出力はピクセル単位のアルファ合成です。白い面ではライト画像、黒い面ではダーク画像として見えます。これにより、README・ドキュメント・UI は2つのファイルや media query を用意せず、1つの素材で済みます。
2つのアップロード枠とライブプレビュー
ライトモード画像とダークモード画像をそれぞれ選ぶと、両方が読み込まれた時点で合成PNGが生成され、白いカードと黒いカードの両方に表示されるので、ダウンロード前に両テーマでの見え方を確認できます。
PNG固定の書き出し
ダウンロードされるのは常に PNG で、ファイル名は light-dark-image.png、canvas.toDataURL で生成されます。JPEG・WebP・SVG の出力や、品質・圧縮の設定はありません。
キャンバスは大きい方の画像に合わせる
結果のサイズは2枚のうち大きい方の幅と大きい方の高さになり、両方の元画像は左上を基準にキャンバスいっぱいに引き伸ばされます。アスペクト比が違う場合は余白や切り取りではなく、変形します。
ローカル処理で、調整項目なし
ファイルは FileReader で読み込み、canvas 上で合成します。アップロードは一切行いません。明るさ・コントラスト・サイズ・位置・背景・形式のコントロールはなく、入力は2枚の画像だけです。
ライト/ダーク画像に関するFAQ
このツールは具体的に何に使うのですか？
ライトモード用のアートワークとダークモード用のアートワークを、背景によって見え方が変わる1枚の透過PNGに変換します。白い面ではライト版、黒い面ではダーク版が表示されます。README・ドキュメント・UI のテーマ対応素材のためのもので、2枚の別画像を生成するツールではありません。
調整できる設定はありますか？
調整できるのは2枚の元画像だけです。明るさ・コントラスト・色・位置・拡大縮小・背景色・形式・品質のコントロールはなく、合成自体を微調整する項目もありません。プレビューパネルは表示専用です。
対応している入力・出力形式は？
入力は accept="image/*" でブラウザのデコーダーに委ねるため、JPEG・PNG・WebP・GIF が使えます。出力は常に PNG で、JPEG・WebP・SVG の書き出しはありません。
複数のペアを一度に処理できますか？
いいえ。各アップロード枠は選択した最初のファイルのみを使い、ページは一度に1組のライト/ダーク画像だけを処理します。キュー・バッチモード・履歴はありません。
サイズ制限はありますか？サイズが違う場合はどうなりますか？
ブラウザの canvas メモリが許す範囲を超える、明示的なピクセル上限はありません。出力サイズは max(幅) × max(高さ) で、両方の画像が左上からそのサイズに引き伸ばされるため、アスペクト比が違うと余白や切り取りではなく変形します。
すべてローカルで処理されますか？
はい。画像は FileReader でデコードされ、ブラウザの canvas で合成されます。アップロードはなく、サーバーも関与しません。合成結果は data URL としてメモリ上に保持され、ダウンロードするまで残ります。
合成結果はどの程度正確ですか？
近似です。ライトのチャンネルは 128–255、ダークのチャンネルは 0–127 に再マッピングし、そのうえで純白と純黒で正しく合成されるようにアルファと色を解きます。色は量子化され、極端なコントラストでは階調が失われ、計算式が厳密に成り立つのは純白／純黒の背景だけです（グレーや色付きの背景では混色します）。透過度はライト画像のアルファのみを使い、2枚の画像が明るさの前提を満たさないピクセルではアルファが 0 にクランプされます。
