画像に透かしを追加
写真にテキストの透かしを追加します。実際の画像上でリアルタイムプレビューが表示されるため、サイズ、不透明度、角度、位置がどう見えるか正確に確認できます。
クリックして画像を選択、またはここにドラッグ＆ドロップ
JPG、PNG、WebPに対応。デバイス内にとどまり、アップロードは一切されません。
生成されると、透かしが入った画像がここに表示されます。
上のプレビューは、サイズ、不透明度、角度、色、位置を調整するたびに実際の画像上でリアルタイムに透かしを表示します。最終的なダウンロードファイルは、表示されているものと一致し、画像のフル解像度に拡大されます。
仕組み
ライブプレビューは写真の上に重ねて配置されたDOM要素ですが、最終的な画像は<canvas>上での実際のピクセル処理です。適用をクリックすると、元の画像がフル解像度で描画され、canvasのコンテキストが9つの基準点（四隅、辺の中点、中央、それぞれ6%のマージンで内側に配置）のいずれかに移動され、指定した角度で回転し、テキストがfillText()で描画されます。色と不透明度はglobalAlphaを通じて適用されます。テキストの配置とベースラインは基準点ごとに設定されるため、プレビューでの「右下」は出力でも同じ相対位置に配置されます。
微妙な部分はスケールです。画面上のプレビューは500ピクセル幅かもしれませんが、実際の写真は4000ピクセルあるため、単純なツールではプレビューでは正しく見えた透かしが、実際には極小になってしまいます。このツールは表示されているプレビューの幅と画像の本来の幅の比率を測定し、その比率でフォントサイズを掛け合わせます。そのため、プレビューでの48pxは、フル解像度のファイルでも同じ比率のサイズになります。結果は元の形式で再エンコードされます。JPEGは品質0.95、PNGは可逆です（できるだけシャープなテキストの縁が欲しい場合はPNGを選んでください）。
透かしとは何かを理解しておく価値があります。このテキストはレイヤーやメタデータとして保存されるのではなく、ピクセルに焼き込まれるため、EXIFデータのように誰かが取り除くことはできません。これは諸刃の剣でもあります。隅にある小さく不透明度の低い透かしは、切り抜きツールやAIによるインペインティングの格好の餌食になります。実際に画像を保護する透かしは、被写体に重なり、角度がついていて、適度な不透明度を持つものです。これはまさに位置、角度、不透明度のコントロールが存在する理由です。
プレビューも最終レンダリングも、あなたのタブ内で実行されます。作業中にDevToolsのNetworkパネルを確認してみてください。写真は決してアップロードされないため、クライアントの校正刷りや未公開のショットはあなたのマシン内にとどまります。