7/01/2018

防止網頁圖片被下載的密技

防止網頁圖片被下載的密技

A+
最近接到一個需求,由於案主網站的圖文常被中國網站、或農場網站盜取,所以希望能夠讓網頁上的圖片,不要那麼容易被下載。

當然我也跟案主說了,任何方法都不可能阻止圖片被取得,最簡單的按一下 Print Screen 鍵就拿走了,所以不如做好浮水印比較實在。

不過案主的出發點是,至少不要簡單的按右鍵就能另存圖片,這樣可以讓大部分的使用者覺得取得圖片很麻煩,就打消偷圖片的念頭。

以防盜的觀念來說,是這樣子沒錯,雖然不存在完全防盜的方法,但只要竊取的流程越麻煩,就越能防止盜圖事件。

那麼本篇就來說明,如何設計一個防止盜圖的流程,又能兼顧使用者體驗。


<< 請注意!本篇文章含會員加值文章內容,需點數兌換 >>


(圖片出處: pixabay.com)


一、防盜圖原理


1. 再次提醒

關於我對「防止下載圖片」這件事的態度,可參考「保護網頁著作權的初階構思__(2) 網頁篇」,是沒有非常鼓勵這麼做,因為與 "網路分享" 的前提抵觸。

雖然阻止了部分盜圖者,但同時也影響了網站正常讀者的權益,讓儲存圖片變得困難,所以站長們需要拿捏分寸。

低階盜圖者會拿不到圖,不過高階盜圖者一定寫得出對應的程式,所以這不是萬全之策。


2. 考慮使用者體驗

最簡單的防盜圖方法,是直接封鎖右鍵,但這會造成非常差的使用者體驗,為了圖片不給下載,現在連文字都無法複製,站長們要考慮是否流失的讀者更多,為網站帶來更多傷害。

而且更簡單的是,只要按照這篇「免安裝外掛, 直接破解網頁 "鎖右鍵+防複製" 的方法 (使用書籤)」,不用一秒鐘就破解了,所以我最不贊成用封鎖右鍵的方式。


3. 改用背景圖呈現

什麼圖片無法按右鍵下載呢?答案是背景圖片。

如果網頁上的每張圖,都使用背景圖片來呈現的話,那麼使用者按右鍵時,就會發現「怎麼沒有另存圖檔的選項?」

對網路環境熟悉的使用者,立刻會發現是怎麼回事,不過這招要應付多數的盜圖者是綽綽有餘了。


4. 讓替代圖片可下載

使用「3. 改用背景圖呈現」時,會讓一部份盜圖者產生戒心,改尋找其他破解法。那麼防盜圖的流程還可加進一招:「讓圖片可以下載,但卻下載到錯誤的圖片」。

這麼一來除了可以鬆懈戒心,也可以讓砍站、砍圖軟體這類工具,看起來變得滑稽。



二、展示圖片


以下這幾張圖可以試著下載看看,只能存成一張透明的 1x1 圖檔。

同時本篇的語法,會讓每張圖自動置中。








三、安裝語法


1. 準備動作

在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

以 Blogger 為例,請到後台「主題」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery,如果已經安裝過請刪除此行,以免重複安裝。


2. 安裝程式碼

如果對範本的程式碼熟悉,以下程式碼請放在「文章區塊」的後面。

如果不熟悉的話,只好放在範本底部,執行效率會比較差一些。在範本中搜尋 </body> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<!--圖片防下載-->
<script>
//<![CDATA[
(function() {
var $postBody = $(".post-body"), // 文章區塊的位置
blankGif = "https://1.bp.blogspot.com/-XEdTvNh8cUc/WzTMxnI_yvI/AAAAAAAAXQg/4z0M8e_Avoc6s31yMbdBL5YyKgxz4oRjwCLcBGAs/s1600/blank.gif"; // 替代圖片網址

$postBody.find("img").css("max-width","100%").wrap("<div></div>").on("load",function(){var d=$(this),b=this.width,a=this.height,e=d.attr("src"),c=d.parent();c.css({width:b,height:a,margin:"auto",background:"url('"+e+"')","background-size":"cover",position:"relative"});d.off("load").attr("src",blankGif).css({position:"absolute",width:"100%",height:"100%"})}).each(function(){var a=$(this);if(this.complete){a.trigger("load")}});
})();
//]]>
</script>
<!--Designed by WFU BLOG-->

  • 紅色字串如果是 Blogger,一般就是文章區塊的位置,不必修改。
  • 如果非 Blogger 官方範本、或其他平台的網站,請改為自己文章區塊的位置,例如將字串改為 "." + class 名稱、或是 "#" + id 名稱



四、會員加值內容


以下語法是提供給客戶使用的版本,圖片可自適應大小,程式碼經過優化,執行速度比較快,因此放在不公開的會員加值內容,要先加入會員並需要點數才能兌換。




五、常見 FAQ


由於每個人的網站,文章區塊圖片的 CSS 可能都不一樣,所以本文的程式碼不一定能完全適用,請根據自己圖片的 CSS 進行調整。

Q1: 為何安裝完畢後,圖片顯示一片空白?

Ans: 圖片的 CSS 可能設定了「白色底色」,請將你的圖片底色 background 改為 transparent(透明)。



六、聯絡表單


加值文章的會員,使用上有任何問題請用下面的表單與我聯繫:




更多「著作權保護」相關文章:
如這篇文章對你有幫助,歡迎「分享」或給我個讚:

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP