イメージにウォーターマークを追加する

Question

年齢を検索しましたが、自分のニーズに合わせて解決策を見つけることができません。

ここにその話があります。私はウェブサイトを作成して、実際にダウンロードした画像にウォーターマークを追加したいと思っています。

昨日私は9gagというウェブサイトを閲覧していました。このウェブサイトを以前に聞いたことがない人は、その漫画ベースのウェブサイトで、画像をダウンロードしたり、ウェブサイト以外の場所から画像にアクセスすると、その下に「透かし/バナー」があります。画像。

たとえば、この画像を取る： link、画像の下部にバナーは表示されません。

[画像URLをコピー]を右クリックすると、imageというリンクが表示されます。今すぐバナーをご覧ください。

私は彼らのやり方について非常に混乱しています。私たちのウェブサイトでこれを使用することができれば素晴らしいでしょう。

誰でもアイデアがありますか？どんな種類のCGIを使用していますか？

P.S：追加するタグがわからないので、誰かがより良いタグの組み合わせを知っている場合は、編集してください。

Answer 1

このエフェクトは単なるCSSトリックです。画像そのものには実際に下にウォーターマークが含まれていますが、画像タグがページに表示されているときに画像の下端42ピクセルを隠す（オーバーフロー：隠し）ブロックにラップされます。

あり、より洗練されているあなたがすることができる他のものがある（例えば、画像は、PHPスクリプトを経由して提供され、HTTPリファラ

header("content-type: image/jpeg"); 
if (!isset($_SERVER['HTTP_REFERER'])){die("alert('Restricted Access!');");}; 
$_u=parse_url($_SERVER['HTTP_REFERER']); 
$_u=preg_replace("/(www.)/i","",strtolower($_u['host'])); 
$_i=$_SERVER['HTTP_HOST']; 
$_i=preg_replace("/(www.)/i","",strtolower($_i)); 
if ($_u != $_i){ 
    //handle this with gd or redirect 
} 

を比較している）誰かがロードしようとする場合にのみ動作します別のウェブサイトからの画像、または画像URLに行く場合は...一般的にsave-asはブラウザのキャッシュから画像を保存するので、cssのトリックはあなたが持つ最良のオプション（またはこれらのオプションの組み合わせ）かもしれません。基本的に、Web上に表示されるものはすべてキャプチャできることに留意してください（上記のコードは簡単ではなく、いつでもprtscできます）。

Answer 2

PHPのGDライブラリは、これを行うのに役立ちます。

1. あなたはimagecreate機能を使用しますが、元のサイズにいくつかのより多くの「スペース」を追加し、新しいイメージを作成する必要があります。例：私はあなたが

2. がimagefilledrectangle機能

を使用して、そのグレー色で、新しいイメージを塗りつぶし、その関数を使用して200x220pxの画像を作成する必要があります（あなたもGDの機能を使用して取得することができます）200×200の画像を持っている場合

3. コピーPNG、GIFなどの画像/ タイプにヘッダのコンテンツタイプを設定imagecopy

4. を使用して新しいものに元の画像に..

5. 番目の出力には、イメージをimagepngまたは必要な形式を持つ他の関数を使用しています。

Answer 3

私はjQueryの透かしが成功を収めてきました： Jquery Watermark