画像ウォーターマークツール

画像透かしツールは、写真の上にテキスト、ロゴ、別の画像を重ね、著作権、出典、ブランド、使用状態、公開文脈を示すためのツールです。商品写真、ポートフォリオ、イベント写真、研修資料、SNS 投稿、承認前のプレビューなどで使われます。重要なのはバランスで、透かしは無断利用を抑える程度に見える必要がありますが、被写体や細部を隠しすぎると画像の価値が下がります。位置、不透明度、サイズ、繰り返し、角度を画像に合わせて調整することが大切です。処理はブラウザー内で行われます。

ウォーターマークの付与は完全に 2D Canvas 上で行われます。ソース画像は ctx.drawImage を通じてネイティブピクセル寸法の HTMLCanvasElement に描画され、テキストまたはロゴがその上に合成されます。テキストには ctx.fillText、ラスターオーバーレイには 2 回目の drawImage 呼び出しが使用されます。不透明度は ctx.globalAlpha で制御され、後続するすべてのアルファチャンネルに乗算されます。50% 透過の PNG に対して globalAlpha を 0.5 にすると最終ピクセルは 25% になるため、「ウォーターマークが見えない」というバグ報告の最も一般的な原因となります。 配置には標準的な Canvas 変換が使用されます。ctx.translate で原点を配置アンカー（左上、右上、中央、右下、または 3×3 グリッドの各セル）に移動し、ctx.rotate(angle) でその原点を中心にダイアゴナルスタンプを傾け、描画呼び出しでオフセットなしにマークを配置します。タイル敷きウォーターマークは回転したソースで CanvasPattern.createPattern を呼び出し、ctx.fillRect でキャンバス全体に描画するため、ソース寸法に関係なく均等な間隔で FULL PAGE DRAFT ストライプを維持できます。フォントメトリクスは ctx.measureText から CSS ピクセルで報告されるため、2x ディスプレイでプレビューに収まる 28px ラベルは 1x モバイル書き出しでは切り取られる場合があります。 エクスポートステップでは 'image/png'、'image/jpeg'、または 'image/webp' と非可逆形式用のオプション品質パラメータを指定して canvas.toBlob を呼び出します。キャンバスはソース解像度で動作するため、出力は元のピクセル寸法を保持しますが、ソースの EXIF 向き、ICC プロファイル、その他のメタデータは含まれません。約 30 を超える大きなファイルのバッチでは UI スレッドがブロックされます。toBlob は非同期ですが、描画スタックはメインスレッドで同期的に実行されるため、重いワークロードは OffscreenCanvas を使用した Web Worker への移動が有効です。

• 合成スタック：ベースに ctx.drawImage、マークに ctx.fillText（または 2 回目の drawImage）、透過乗算に ctx.globalAlpha。
• アルファ計算：globalAlpha は各ピクセルの既存アルファに乗算されるため、0.5 アルファの PNG 上の 0.5 マークは 0.5 ではなく 0.25 として描画されます。
• 回転：ctx.translate でアンカーに移動、ラジアン単位の ctx.rotate(angle)、その後原点 (0,0) で描画すると変換が配置ポイントを中心に維持されます。
• タイル敷き：createPattern は CanvasPattern を返し、fillRect でキャンバス全体に塗りつぶせるため、任意のソース寸法で均一な間隔を維持します。
• テキストメトリクス：measureText は CSS ピクセルで報告するため、2x プレビューでサイズ指定したラベルは 1x モバイル書き出しで画像エッジからはみ出す場合があります。迷ったときはキャンバス幅に比例させてください。
• エクスポート：toBlob('image/png' | 'image/jpeg' | 'image/webp', quality) はソース解像度を保持しますが EXIF と ICC を除去します。縦横の正確さが重要な場合は、描画前に EXIF 向きに基づいて回転してください。