Home » JavaScript 應用

[Js]用 JavaScript 來做偽浮水印

[ 日期： | 瀏覽：22,035 | 迴響：10 ]

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

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

4084719_0經過偽裝後4084719_1

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

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

檢視原始碼 HTML
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 來做偽浮水印 的迴響

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

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

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

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

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

      檢視原始碼 HTML
      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" />

發表迴響