2012-03-16 60 views
1

簡單的問題與是/否的答案,如果是的話,那麼如何?下載水印圖像...有可能嗎?

假設您有一個HTML頁面,其上沒有任何水印。

如果用戶將其保存到計算機上,可以在該圖像上放置水印嗎?

我需要一個簡單的函數,在下載水印的圖像或保存...

我不明白的是,在瀏覽器中的圖像加載一次,它在技術上下載,所以是有顯示的方式在屏幕上沒有水印的圖像,並且如果用戶打開瀏覽器緩存,他/她會發現一個水印副本?

如果任何人使用任何平臺(PHP,GD,jQuery等)完成此操作,您的貢獻將不勝感激。

+7

你不能告訴別人之間的差異下載的圖像瀏覽網頁內(例如'')或某人直接訪問圖像以在圖像外查看/下載圖像。無論用戶將如何顯示它們,都必須爲所有圖像加水印。 – 2012-03-16 18:50:36

+0

屏幕上沒有水印..屏幕是瀏覽器..是什麼?如果他保存頁面! – zod 2012-03-16 18:51:55

+0

我認爲你把一個醜陋的水印,這就是爲什麼你不要在開始時顯示它:-) – zod 2012-03-16 18:53:12

回答

2

在這裏,您可以瞭解如何使用PHP做:http://www.sitepoint.com/watermark-images-php/

我個人不認爲這是可能的使用JavaScript,因爲你已經有了自己說,它已經被下載。 但不要指責我。

在服務器端肯定有可能,正如您在上面的鏈接中看到的那樣。

+0

+1。另請參閱[GD和圖像函數](http://php.net/manual/en/ref.image.php)以及[ImageMagick](http://php.net/manual/en/book.imagick)。 php) – Nick 2012-03-16 20:44:44

2

可能的替代解決方案是將圖像包含在具有隱藏溢出的元素中。 例如:

你的形象有200px的高度,你在圖像的底部添加一個額外的20px水印(上傳時)(所以它實際上不是在圖像的頂部)。因此,現在總圖像的高度爲220px;,但是將其放置在元素內部會給該元素一個高度和一個隱藏的溢出。

+0

+1我看過像9gag這樣的網站做到這一點。 – 2012-03-16 19:02:05

+1

當水印在圖片下時真的有意義。然後我打開它的油漆,並減少底部 – 2012-03-16 21:03:37

+0

偉大的建議,這正是我從我的研究發現,想象得到一個全屏幕圖像,水印在中心,然後有另一個div頂部只有部分/切片沒有加水印......而且可以通過切片圖像進一步將它們放回原處,這很簡單,通過php ... – jaguarhaus 2012-03-17 12:27:43

1

當用戶右鍵單擊圖像時,可以更改圖像的來源。這樣,您可以在用戶嘗試保存圖像時將源代碼更改爲帶水印的版本。

是的,用戶的緩存中已經有了非水印版本,但只有高級用戶纔會知道如何獲取這些圖片。

$('img').on('mousedown', function (event) { 

    //check which mouse button was clicked, 1 == left, 2 == middle, 3 == right 
    if (event.which == 3) { 

     //update the source of this image 
     this.src = this.src.replace('.jpg', '_watermarked.jpg'); 
    } 
});​ 

這裏是一個演示:http://jsfiddle.net/s6A9m/

+0

根本不起作用。你有沒有試圖右鍵點擊,然後選擇查看圖像?通常情況下,你會看到新的圖像,但有時會發生上下文菜單速度不夠快,並且你看到舊圖像 – 2012-03-16 21:05:42

+0

@SvenBieder'根本不工作。「 - 我已經在IE7-8中測試過了, Chrome 17,Firefox 10,Safari 5.最有可能的是,互聯網連接並不是最後的閃電,因此您只需預加載水印圖像,以便它快速更改。在我保存圖像時測試的每個瀏覽器中,它都保存了水印版本。 – Jasper 2012-03-16 21:12:34

+0

我還沒有試圖直接保存圖像。我已經像我通常自己那樣做了。首先在保存前查看圖像。但你說得對,我在工作,連接很糟糕。但是這意味着您必須意識到那時尚未使用全寬帶的用戶可能會看到水印圖片,或者可能會看到原始圖片。我也猜想他想要一個自動加水印功能,他不需要爲他想要顯示的每個圖像上傳2張圖像。但我喜歡這種方法。 – 2012-03-16 21:17:07

1

凡是用戶可以看到他們可以採取。如果下載,只有水印沒有辦法。當瀏覽器中顯示的圖像已經下載時。

您可以採取幾種方法。我建議你使用PHP在圖像顯示前將水印添加到圖像中。這意味着網站上的所有受保護圖像都將顯示可見水印。我見過的第二種方法是顯示未加水印的低質量版本,但將完整版質量限制爲僅限於那些應該看到它的人。

2

一個竅門可能是組合2個圖像,所以他們成爲一個。 我有圖像答: enter image description here

然後,添加圖像B(水印版) enter image description here

所以,當你顯示你使用一個作爲背景的用戶,另一種爲圖像的圖像,所以當用戶嘗試下載,他們只會得到一個部分。當然如前所述,用戶將能夠在屏幕上看到他們所能看到的所有內容,但大多數用戶將無法正確合併圖像。

請注意,頂部的圖像必須是透明的。

我建議做這個服務器端緩存修正後的圖像當你切出水印

+0

或我右鍵單擊您的圖像,然後選擇查看背景圖像。這不是一個真正的方法 – 2012-03-16 21:02:00

+4

正如我在我的第一個答案中所說的「......用戶能夠獲得所有他們可以在屏幕上看到的......」,但這會創建一個解決方案,使用戶很難抓住你的圖像,而不必做很多工作。 – 2012-03-16 21:26:28

+0

我同意Bjørne的解決方案,因爲如果用戶走出他/她的方式,他們意識到版權侵犯,順便說一句,這是放在任何標準網站的使用條款部分。除此之外,還可以使用加密技術在圖像中注入版權信息,禁用右鍵單擊以及顯示所顯示的信息/圖像僅用於查看目的而不是「借閱」。 – jaguarhaus 2012-04-07 20:26:15