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

Image may be NSFW.
Clik here to view.最近接到一個需求，由於案主網站的圖文常被中國網站、或農場網站盜取，所以希望能夠讓網頁上的圖片，不要那麼容易被下載。

當然我也跟案主說了，任何方法都不可能阻止圖片被取得，最簡單的按一下 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(透明)。

六、聯絡表單

加值文章關閉留言板功能，使用上有任何問題請用下面的表單與我聯繫：




Image may be NSFW.
Clik here to view.