画像に背景を追加 — 単色 / 画像で透過部分を合成
透過 PNG や写真にカラーコード指定の単色背景、または別の画像背景を合成します。Canvas で処理するのでブラウザ内だけで完結。元サイズで透過部分を塗りつぶすか、上下左右に余白を追加して背景を回り込ませるかを選べます。複数画像を一括処理して ZIP でダウンロード可能。出力フォーマットは元と同じ (PNG / JPEG / WebP)。
使い方
画像をドロップ (複数可)。「単色」モードはカラーコード (#rrggbb) で背景色を指定、「画像」モードは別画像を選んで cover / contain でフィット方法を選択します。「余白」を 0 にすると元画像と同じサイズで透過部分だけ背景で塗りつぶし、> 0 にすると上下左右に余白を追加して背景を回り込ませます。「背景を合成」で Canvas 合成し、個別 DL または全件 ZIP で書き出します。出力は元画像と同じ形式 (PNG / JPEG / WebP)。
よくある質問
- 画像はサーバーに送信されますか?
- いいえ。Canvas でローカル合成しているので画像は端末外に出ません。背景画像も同じくブラウザ内でだけ使われます。
- 対応している入力形式は?
- JPEG / PNG / WebP。元のフォーマットと拡張子を維持して書き出します。透過情報を保つには PNG や WebP を使ってください (JPEG は透過なし)。
- JPEG の写真にも背景をつけられますか?
- はい。JPEG は透過がないので「余白」を > 0 にして上下左右にマージンを足し、その余白部分が背景になります。透過 PNG の場合は余白 0 でも透過部分が背景で埋まります。
- カラーコードの形式は?
- #rrggbb の 6 桁 hex のみ対応です (例: #ffffff, #1e3a8a)。3 桁省略形 (#fff) や rgba() は未対応。
- 背景画像が引き伸ばされる / 切れるのを避けたい
- 「フィット」で contain を選ぶと背景画像のアスペクト比を保ったまま枠内に収まります (余白が出る可能性あり)。cover はトリミングしてでも枠を完全に埋めます。
- 1:1 や 16:9 のキャンバスサイズに揃えたい
- 現在は元画像幅に対する % 余白指定のみで、任意のアスペクト比指定には未対応です。将来的なオプションとして検討中。
類似のツール
画像の背景を透明化 — AI で人物・物体を切り抜き
BRIA RMBG-1.4 を transformers.js + ONNX Runtime Web でブラウザ内推論し、被写体だけを抜き出した透過 PNG を出力します。モデルは初回のみダウンロードされ、以降はオフラインで動作。複数枚一括処理と ZIP ダウンロードに対応。画像はサーバーに送信されません。
画像コラージュ — グリッド / 横 / 縦に結合
複数の画像をグリッド、横一列、縦一列で 1 枚の画像に結合します。Canvas で合成するためブラウザ内だけで完結。列数・隙間・余白・背景色・出力形式 (PNG / JPEG / WebP) を調整でき、並び順を上下ボタンで入れ替え可能。
AVIF を JPG / PNG / WebP に変換 — 古い Safari でも開ける形式へ
ブラウザネイティブの AVIF デコーダで .avif 画像を読み込み、JPEG / PNG / WebP として書き出します。AVIF はファイルサイズが小さく Web 配信向きですが、古い Safari やビューアでは開けないことが多く、メール添付や Office / Slack などへの貼り付けにも不向きです。複数ファイルを一括変換して ZIP でまとめてダウンロードもできます。アップロードした画像は外部に送信されず、すべての処理はブラウザ内で完結します。
色覚シミュレーション — 色覚多様性の見え方
画像が 1 型 (P 型・赤)・2 型 (D 型・緑)・3 型 (T 型・青) 色覚や 1 色覚 (全色盲) でどう見えるかをシミュレートします。デザインや資料の色使いがアクセシブルか確認するのに。Canvas + 色覚変換行列でブラウザ内処理、画像はアップロードされません。