ウォーターマークアダー

ウォーターマークアダーとは何ですか？

写真にウォーターマークを追加する方法

1. 1
   写真をドロップする

   最大25のJPG、PNG、またはWebPファイルをアップロードエリアにドラッグするか、デバイスから選択するためにクリックします。各行にはソースの寸法とファイルサイズが表示されます。

2. 2
   テキストまたはロゴ画像を選択

   キャプション、著作権ライン、またはあなたの名前を入力します — 色を選択すると、透かしが薄い黒のアウトラインで表示され、どんな背景でも読みやすくなります。あるいはロゴ画像に切り替えて、PNGをアップロードします（透明な背景を推奨）。

3. 3
   位置を設定

   9つのコーナーまたは中央の位置のいずれかを選択するか、画像全体に斜めにマークを繰り返すために「タイル」をクリックします。タイルモードは、剥がしにくいポートフォリオの透かしに標準です。

4. 4
   サイズ、不透明度、パディング、回転を調整

   サイズは写真の長い辺のパーセンテージで、ポートレートとランドスケープの両方で適切にスケールします。不透明度は、ほとんど見えない5%から完全に不透明な100%までの範囲です。パディングはマークを端から離します。回転はタイルモードのためのクラシックな30度の傾きを提供します。

5. 5
   適用してダウンロード

   「透かしを適用」をクリックしてキューを処理します。各行は結果とダウンロードボタンで更新されます。「すべてダウンロード」を使用して、ファイル間に小さな遅延を設けて全バッチを取得します。これにより、ブラウザがブロックしません。

ブラウザ側の透かし処理の仕組み

1. createImageBitmap()で各入力ファイルをデコード — ネイティブ、ライブラリなし。
2. ソースの正確な幅と高さで2Dキャンバスを割り当てます。
3. ソース画像をフル解像度でキャンバスに描画します。
4. 透かしのサイズを長い辺のパーセンテージとして計算します。
5. ctx.globalAlphaを選択した不透明度（5%–100%）に設定します。
6. テキストの場合：自動アウトラインのために塗りつぶし + 薄いストロークでレンダリングします。
7. ロゴの場合：計算されたサイズでdrawImageし、アスペクト比を保持します。
8. タイルモードの場合：コンテキストを回転させ、キャンバス全体に描画をループします。
9. canvas.toBlob(format, quality)で再エンコードし、ダウンロードとして提供します。

参考: MDN — CanvasRenderingContext2D.globalAlpha

一般的な透かし処理の仕事

透かしアダーを使用するタイミング

• オンラインに投稿する前に、著作権ラインやスタジオ名でポートフォリオ写真のバッチにブランドを付けます。
• デザインレンダリング、モックアップ、レビュー用に送信されたPDFに「DRAFT」または「CONFIDENTIAL」をスタンプします。
• 不動産、バケーションレンタル、または製品リスティングに小さなロゴを追加して視覚的なブランドの一貫性を保ちます。
• ブログのヒーロー画像のカジュアルな持ち去りを防ぐために、微妙なURLスタイルの帰属を追加します。
• クライアントに送信された証明書に透かしを付けて、透かしのないファイルが納品物として残るようにします。
• 共有する前に、会議、結婚式、またはスポーツ写真のフォルダーに日付やイベント名を追加します。
• ドラフト写真の納品物に重いマークをタイルして、切り取りや色補正で剥がれないようにします。

関連ツール

よくある質問