Home » JavaScript 應用

[Js]用 JavaScript 來做偽浮水印

這幾天有網友問到背景圖片的問題,他要的是一張圖片永遠固定在某一區塊,就算捲軸拖拉也一樣在那邊,醬的功能用CSS就能做出來了,但是卻讓我想到另一個idea。有些網站會在自己的圖片或是照片上加上圖片版權為XXX所有的字樣,有點像是新台幣紙鈔上面的浮水印一樣,醬一來可以防止人偷圖(抓了圖還要修字...),二來就算被盜連了,至少上面有說是盜自那邊的網站。不過若是要一張一張的加浮水印的話,又有點浪費時間的感覺,所以我就想到一種偽浮水印的方法。

什麼是偽浮水印?顧名思義就是假的浮水印啦~讓人以為是真的有浮水印,但其實那只是個幌子。假設有一張照片要來偽裝,我們要先準備一張版權字樣的透明圖及一張大小1×1的透明圖,接著就是把這三張圖合成一張。各位聽到這邊各位應該都還是不了解我在說什麼吧!直接看下面的圖解好了。

4084719_0經過偽裝後4084719_1

先把版權宣告字樣的透明圖移到照片的右下角,再來就是把1×1的透明圖放大跟要被偽裝的照片一樣大小後,把透明圖疊在照片上面,因為是透明圖的關係,所以我們還是可以看到照片跟版權宣告的字樣,且透明圖是在最上層,若有人要複製照片的話,只會複製到透明圖,無法點選到真正的照片,醬就能達到偽裝的功能了。不過若是看原始碼的話~就會破功了,這只能用來騙騙不懂的人!

了解完原理後就開始來動手做做看,先看Body部份:

1
2
3
4
5
6
7
8
<body>
	<img src="http://blog.xuite.net/_image/logo.gif" border="1">
	<img src="http://blog.xuite.net/_image/logo.gif" ispic="true" border="1">
	<img src="http://blog.xuite.net/_image/logo.gif" ispic="true" border="1">
	<img src="http://blog.xuite.net/_image/logo.gif" border="1">
	<img src="http://blog.xuite.net/_image/logo.gif" ispic="true" border="1">
	<img src="http://blog.xuite.net/_image/logo.gif" border="1">
</body>

這邊我放了六張Xuite的logo圖,且在某三張圖的Img中加入了一個屬性-ispic,這是要用來區分那些圖是要加浮水印用的,若為true時就是表示要加浮水印;若為false或是沒有此屬性則表示不用加。其中的border="1"是為了方便看出圖的範圍用的,實際情況下可以拿掉。

再來換看JavaScript的部份:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script type="text/javascript">
<!--
	function init(){
		//變數myLogo為一圖片,並設定src為版權字樣圖片路徑
		var myLogo = new Image();
		myLogo.src = "logo.gif";
		//變數myBack為一圖片,並設定src為1x1透明圖路徑
		var myBack = new Image();
		myBack.src = "transparent.gif";
		//變數allPic用來儲存網頁中所有圖片的數量
		var allPic = document.images.length;
		for(var i=0;i<allPic;i++){
			//判斷圖片中的ispic屬性值是否為true
			if(document.images[i].ispic){
				//變數logoTop為myLogo的top值 = 要偽裝圖片的offsetTop+(要偽裝圖片的高-版權字樣圖片的高)
				var logoTop = document.body.offsetTop + document.images[i].offsetTop + (document.images[i].height- myLogo.height) + "px";
				//變數logoTop為myLogo的left值 = 要偽裝圖片的offsetLeft+(要偽裝圖片的寬-版權字樣圖片的寬)
				var logoLeft = document.body.offsetLeft + document.images[i].offsetLeft + (document.images[i].width- myLogo.width) + "px";
				//變數backWidth為myBack的寬 = 要偽裝圖片的寬
				var backWidth = document.images[i].width + "px";
				//變數backWidth為myBack的高 = 要偽裝圖片的高
				var backHeight = document.images[i].height + "px";
				//變數backWidth為myBack的top值 = 要偽裝圖片的top值
				var backTop = document.body.offsetTop + document.images[i].offsetTop + "px";
				//變數backWidth為myBack的left值 = 要偽裝圖片的left值
				var backLeft = document.body.offsetLeft + document.images[i].offsetLeft + "px";
				//把myLogo加到網頁中,並設定其位置
				document.body.appendChild(document.createElement("<img src='"+myLogo.src+"' style='position:absolute;top:"+logoTop+";left:"+logoLeft+";'>"));
				//把myback加到網頁中,並設定其位置
				document.body.appendChild(document.createElement("<img src='"+myBack.src+"' border=2 style='position:absolute;width:"+backWidth+";height:"+backHeight+";top:"+backTop+";left:"+backLeft+";'>"));
			}
		}
	}
	//Body載入完後執行init()函式
	document.body.onload = init;
//-->
</script>

在網頁載入完後會執行init()函式來做偽裝的工作。一開始我宣告了兩個Image物件出來,一個用來存放版權字樣圖片用,另一個用來存放1×1透明圖用。接著就是先找出網頁中圖片的數量,再用迴圈一一來判斷該圖片是否要偽裝,若為true的話,就開始取得該圖片的offsetTop、offsetLeft、width及height並算出myLogo的top及left值跟myBack的top、left、width及height值。

若不懂這些值是怎樣來的可以先看下圖的說明:

4084719_4

正常情況之下可以利用DOM物件來取得物件style屬性中所設定的top及left的值,以達到取得物件座標之目的,若是未設定style屬性中的top及left值的物件的話,此時就需要利用offsetTop及offsetLeft來取得對應的座標值。

所以版權字樣圖片的top值就是要偽裝照片的offsetTop+(要偽裝照片的height-版權字樣的height,left 值就是要偽裝照片的offsetLeft+(要偽裝照片的width-版權字樣的width);那1×1的透明圖的寬高就是要偽裝照片的寬高,top和left就是要偽裝照片的offsetTop跟offsetLeft。

接著就是產生一個Img物件並加到網頁中。1×1透明圖中的border=2是為了方便看出它是透明圖用的,實際情況下一樣可以拿掉。

這樣效果的語法並不難,只是座標關係要對就好,至於實不實用就看各位囉。

範例瀏覽:
http://demonstration.abgne.tw/javascript/0010/0010.html

10 筆針對 [Js]用 JavaScript 來做偽浮水印 的迴響

  1. 男丁:
      我想請問一下:
    如果想要二張照片合為一張,有一張像浮水印一樣印在另一張照片上面,且合成後的照片想要另存成第三張照片該如何改寫程式呢?
    像http://www.atlaspost.com/act/elsword/list_hot?sort=2&mt=1390 下方的美女圖一樣,程式該怎麼寫呢?是否有範例可以給我參考?

  2. to derek:
    是的~可否指教?
    另外一個問題,==> 也想要像男丁一樣可以把我的網站上加入 F 的按鈕,讓人可以將我的網站介由facebook推薦出去,可是我試了很久,都上(AddToAny)去申請了,還是只能分享原本的title及連結,無法指定我要分享的標題、內文及圖片,可否教我該如何設定,才能使我的網站也能像男丁大大的一樣? 謝謝~

  3. 我看完後想到了以前曾經見過一個站用類似的方法貼圖的
    但不同的地方是那個站底面2張圖做相反的處理
    透明圖永遠都能看得到
    但關掉JavaScript後卻無法顯示底圖
    因為當時還未開始設部落格
    故此無看過語法
    不知道大大能寫出那種嗎?

    雖然那方法也是只要略懂語法就能看圖片地址
    不過能防止關JavaScript的方法

    • 那它應該是把真的圖片當成透明圖片的背景圖片, 這動作也用程式來執行
      因此當 JavaScript 被關閉後, 就無法顯示了, 所以大概可以這麼做

      1
      2
      3
      4
      5
      6
      7
      8
      9
      
      <script type="text/javascript">
      $(function(){
      	$('.abgne').css('background-image', function(){
      		return 'url(' + $(this).data('src') + ')';
      	});
      });
      </script>
       
      <img class="abgne" src="blank.gif" data-src="real.png" />

發表迴響