最近接到一個需求，由於案主網站的圖文常被中國網站、或農場網站盜取，所以希望能夠讓網頁上的圖片，不要那麼容易被下載。當然我也跟案主說了，任何方法都不可能阻止圖片被取得，最簡單的按一下 Print Screen 鍵就拿走了，所以不如做好浮水印比較實在。
不過案主的出發點是，至少不要簡單的按右鍵就能另存圖片，這樣可以讓大部分的使用者覺得取得圖片很麻煩，就打消偷圖片的念頭。
以防盜的觀念來說，是這樣子沒錯，雖然不存在完全防盜的方法，但只要竊取的流程越麻煩，就越能防止盜圖事件。
那麼本篇就來說明，如何設計一個防止盜圖的流程，又能兼顧使用者體驗。
(圖片出處: pixabay.com)
一、防盜圖原理
1. 再次提醒
關於我對「防止下載圖片」這件事的態度，可參考「保護網頁著作權的初階構思__(2) 網頁篇」，是沒有非常鼓勵這麼做，因為與 "網路分享"的前提抵觸。
雖然阻止了部分盜圖者，但同時也影響了網站正常讀者的權益，讓儲存圖片變得困難，所以站長們需要拿捏分寸。
低階盜圖者會拿不到圖，不過高階盜圖者一定寫得出對應的程式，所以這不是萬全之策。
2. 考慮使用者體驗
最簡單的防盜圖方法，是直接封鎖右鍵，但這會造成非常差的使用者體驗，為了圖片不給下載，現在連文字都無法複製，站長們要考慮是否流失的讀者更多，為網站帶來更多傷害。
而且更簡單的是，只要按照這篇「免安裝外掛, 直接破解網頁 "鎖右鍵+防複製"的方法 (使用書籤)」，不用一秒鐘就破解了，所以我最不贊成用封鎖右鍵的方式。
3. 改用背景圖呈現
什麼圖片無法按右鍵下載呢？答案是背景圖片。
如果網頁上的每張圖，都使用背景圖片來呈現的話，那麼使用者按右鍵時，就會發現「怎麼沒有另存圖檔的選項？」
對網路環境熟悉的使用者，立刻會發現是怎麼回事，不過這招要應付多數的盜圖者是綽綽有餘了。
4. 讓替代圖片可下載
使用「3. 改用背景圖呈現」時，會讓一部份盜圖者產生戒心，改尋找其他破解法。那麼防盜圖的流程還可加進一招：「讓圖片可以下載，但卻下載到錯誤的圖片」。
這麼一來除了可以鬆懈戒心，也可以讓砍站、砍圖軟體這類工具，看起來變得滑稽。
二、展示圖片
以下這幾張圖可以試著下載看看，只能存成一張透明的 1x1 圖檔。
同時本篇的語法，會讓每張圖自動置中。
三、安裝語法
1. 準備動作
在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。
以 Blogger 為例，請到後台「主題」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。
2. 安裝程式碼
如果對範本的程式碼熟悉，以下程式碼請放在「文章區塊」的後面。
如果不熟悉的話，只好放在範本底部，執行效率會比較差一些。在範本中搜尋
<!--圖片防下載-->
<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(透明)。
六、聯絡表單
加值文章的會員，使用上有任何問題請用下面的表單與我聯繫：
更多「著作權保護」相關文章：