テキスト透かしの基本 — 画像にテキストを重ねる方法

テキスト透かしとは？

テキスト透かしは、所有権、著作権、またはドラフトステータスを示すために画像の上に描画されるテキスト行です。閲覧者には見えないメタデータベースの帰属とは異なり、可視テキスト透かしはピクセルデータに直接レンダリングされるため、永続的な視覚的マーカーとなります。

基本プロパティ

すべてのテキスト透かしは以下の小さなプロパティセットで定義されます：

プロパティ	説明
テキスト	表示する文字列 — 通常は名前、URL、または著作権表示。
フォント	使用する書体。ArialやHelveticaなどのサンセリフフォントは低い不透明度でも読みやすいため人気です。
サイズ	ピクセル単位のフォントサイズ。画像解像度に合わせてスケーリングする必要があります。800pxのサムネイルで適切な24pxの透かしは、4000pxのプリントでは見えなくなります。
色	白（#ffffff）が最も一般的で、大部分の写真コンテンツとコントラストが出ます。黒（#000000）は明るいまたはハイキーな画像に適しています。
不透明度	0（不可視）から100（完全不透明）の値。30から60が一般的で、目的を果たしつつ画像を損なわない範囲です。

Canvas APIによるテキストレンダリング

ブラウザのCanvas 2Dコンテキストは、fillText()、globalAlpha、および変換メソッド（translate、rotate）を提供し、これらを組み合わせてキャンバスがエクスポートされるまで元の画像データを変更せずに透かしオーバーレイを生成します。つまり、元のファイルはメモリ内で変更されず、エクスポートされたダウンロードのみに透かしが含まれます。

効果的なテキスト透かしのヒント

• 短くする。 長い文章は画像を乱雑にします。名前や短いURLで十分です。
• フォントをトーンに合わせる。 セリフフォントはフォーマルさを、モノスペースフォントはコードやテクノロジーの文脈を伝えます。
• 複数のサイズでテスト。 フル解像度とサムネイルサイズの両方で透かし入り画像をプレビューし、読みやすさを確認します。
• コントラストのある色を使用。 画像が主に明るい場合は暗い透かし色を使用し、その逆も同様です。