這幾天有網友問到背景圖片的問題,他要的是一張圖片永遠固定在某一區塊,就算捲軸拖拉也一樣在那邊,醬的功能用CSS就能做出來了,但是卻讓我想到另一個idea。有些網站會在自己的圖片或是照片上加上圖片版權為XXX所有的字樣,有點像是新台幣紙鈔上面的浮水印一樣,醬一來可以防止人偷圖(抓了圖還要修字...),二來就算被盜連了,至少上面有說是盜自那邊的網站。不過若是要一張一張的加浮水印的話,又有點浪費時間的感覺,所以我就想到一種偽浮水印的方法。
什麼是偽浮水印?顧名思義就是假的浮水印啦~讓人以為是真的有浮水印,但其實那只是個幌子。假設有一張照片要來偽裝,我們要先準備一張版權字樣的透明圖及一張大小1×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的部份:
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值。
若不懂這些值是怎樣來的可以先看下圖的說明:
正常情況之下可以利用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
這個問題有點膚淺...
但我很想知道:怎麼閃過透明圖檔,複製到真正那張圖?
....停用 JavaScript 或看原始碼
男丁:
我想請問一下:
如果想要二張照片合為一張,有一張像浮水印一樣印在另一張照片上面,且合成後的照片想要另存成第三張照片該如何改寫程式呢?
像http://www.atlaspost.com/act/elsword/list_hot?sort=2&mt=1390 下方的美女圖一樣,程式該怎麼寫呢?是否有範例可以給我參考?
要存成第三真的就要有後端程式來合併才行。
男丁:
哦~是這樣哦~
那沒關係,還是很謝謝你的範例唷!
to 如娃
不知你指的是否如此?
範例:http://twcf2.summerhost.info/tp/
請問D大大
你是用什麼程式完成的呢??可否分享一下呢??謝謝
to derek:
是的~可否指教?
另外一個問題,==> 也想要像男丁一樣可以把我的網站上加入 F 的按鈕,讓人可以將我的網站介由facebook推薦出去,可是我試了很久,都上(AddToAny)去申請了,還是只能分享原本的title及連結,無法指定我要分享的標題、內文及圖片,可否教我該如何設定,才能使我的網站也能像男丁大大的一樣? 謝謝~
我看完後想到了以前曾經見過一個站用類似的方法貼圖的
但不同的地方是那個站底面2張圖做相反的處理
透明圖永遠都能看得到
但關掉JavaScript後卻無法顯示底圖
因為當時還未開始設部落格
故此無看過語法
不知道大大能寫出那種嗎?
雖然那方法也是只要略懂語法就能看圖片地址
不過能防止關JavaScript的方法
那它應該是把真的圖片當成透明圖片的背景圖片, 這動作也用程式來執行
因此當 JavaScript 被關閉後, 就無法顯示了, 所以大概可以這麼做