[mooTools] Image Protector: dwProtector 保護圖檔不被下載
[img]http://jsgears.com/_icons/famfamfam/folder.gif[/img] MooTools 1.2 Image Protector: dwProtector[img]http://jsgears.com/_icons/famfamfam/icon_home.gif[/img] [url]http://davidwalsh.name/mootools-12-image-protector-dwprotector[/url]
[img]http://jsgears.com/_icons/famfamfam/comment.gif[/img] 保護您的圖檔不被下載
這個簡單的程式是基於 mootools 1.2 開發的，套用後可以讓您的圖檔有簡易的保護效果，正常情況透過檢視內容或另存圖檔都無法正確儲存下來，對於一般非玩家或無開發經驗的人來說應該是有效的。
先來看一下效果吧，以下圖檔試著用正常的方式來下載，可能都只有看到 blank.gif：
[jsg.example]
<img class="protected" src="http://lh5.ggpht.com/hunter.wu/RKalAumsABI/AAAAAAAAASI/OUGgEIEXwWE/s400/P1010103.JPG"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="_lib/mootools/plugins/dwProtect.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var protector = new dwProtector({
image: '_lib/mootools/plugins/blank.gif',
elements: $$('.protected')
});
});
</script>
[/jsg.example]
看一下原始碼：
[code html]
<img class="protected" src="P1010103.JPG"/>
<script type="text/javascript" src="mootools-1.2-core.js"></script>
<script type="text/javascript" src="dwProtect.js"></script>
[/code]
要保護的圖檔先給一個 class 名稱，之後程式會用到，接著引用 mootools.js 和 dwProtect.js。
JavaScript 的部份如下：
[code js]
window.addEvent('domready', function() {
var protector = new dwProtector({
image: 'blank.gif',
elements: $$('.protected')
});
});
[/code]
在 domready 加上事件處理，透過 new dwProtector() 並且帶入你要的參數即可完成整個保護的作用。
註：關於這個圖檔的保護方式是針對「非玩家」及「無開發經驗」等使用者而做的簡易方式，請看作者如何解釋：
[quote]
It's important to realize that this WAS NOT MEANT AS THE BE-ALL-END-ALL of image protecting. I know you can view-source, or print-screen, or use Firebug, etc. — my article states that clearly.
This is meant to prevent the rookie web user. They don't have Firebug, they don't know how to view-source, and probably don't know print-screen.
[/quote]
頁:
[1]