JavaScript奇淫技巧：用密碼保護(hù)你的照片

avaScript奇淫技巧：密碼保護(hù)的私密圖片

JavaScript奇淫技巧：圖片壓縮、圖片加密

本文將用JavaScript實(shí)現(xiàn)兩個(gè)頗有技術(shù)含量的功能：圖片壓縮、圖片加密。

最終效果：可實(shí)現(xiàn)將任意圖片加密、壓縮，并保存到一個(gè)獨(dú)立的html頁(yè)面中，輸入正確的密碼，才能看到原圖。

效果演示：

第一步、壓縮圖片

技術(shù)原理

將圖片讀入canvas，并使用canvas的toDataURL方法將圖片base64化，在此過(guò)程中，可以設(shè)定quality值，即圖片質(zhì)量值，值為0.1到1之間，值越小，壓縮度越高。

完整代碼

保存為html文件即可運(yùn)行。

<html>
<body>
        <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
        <input id="file" type="file"  capture="microphone" accept="image/*"><br>
        壓縮后的圖片：<span id="sz"></span><br>
        <img id="pic" >
        <script>
            $("#file").change(function(){
            var m_this = this;
            cutImageBase64(m_this,null,900,0.7);
        })
        function cutImageBase64(m_this,id,wid,quality) {
            var file = m_this.files[0];
            var URL = window.URL || window.webkitURL;
            var blob = URL.createObjectURL(file);
            var base64;
            var img = new Image();
            img.src = blob;
            img.onload = function() {
                var that = this;
                //生成比例
                var w = that.width,
                    h = that.height,
                    scale = w / h;
                    w = wid || w;
                    h = w / scale;
                //生成canvas
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                $(canvas).attr({
                    width: w,
                    height: h
                });
                ctx.drawImage(that, 0, 0, w, h);
                // 生成base64
                base64 = canvas.toDataURL('image/jpeg', quality || 0.9);
                document.getElementById("pic").src=base64;
                document.getElementById("sz").innerHTML = parseInt(base64.length/2014,0) + "kb";
            };
        }
        </script>
    </body>
</html>

運(yùn)行效果

壓縮率

本例，運(yùn)行時(shí)加載任何一張本地圖片。從上圖中可以看到，壓縮后圖片的大小是41KB，而原始的文件大小是1MB：

可見(jiàn)，壓縮效果還是非常不錯(cuò)的。

第二步、加密圖片

前面所述的圖片壓縮，是很實(shí)用的技術(shù)，接下來(lái)，展示另一個(gè)奇淫技巧：圖片加密。

之所以即講壓縮壓縮，又談圖片加密，是因?yàn)閳D片加密是于前面壓縮技術(shù)的基礎(chǔ)上完成的。

上面的代碼中，toDataURL產(chǎn)生的是圖片的base64編碼。

Base64編碼必須是完整且正確才能正常顯示圖片。

而只需對(duì)此編碼做小小修改，哪怕僅是改動(dòng)一個(gè)字符，也會(huì)讓圖片無(wú)法正常顯示。

那么，程序中給編碼某個(gè)位置增加一個(gè)字符，以達(dá)到破壞正確編碼進(jìn)而實(shí)現(xiàn)加密的效果：

運(yùn)行效果，輸出加密后的base64編碼：

測(cè)試一下，這段動(dòng)過(guò)手腳的base64編碼以圖片方式加載，看是否能顯示圖片。

效果如下，圖片無(wú)法正常顯示。

那么，接下來(lái)將實(shí)現(xiàn)這樣的效果：

在網(wǎng)頁(yè)中，用img的src引入加密的base64字符，此時(shí)圖片是不能顯示的。然后，可以輸入密碼，當(dāng)密碼正確時(shí)，解密base64字符，讓圖片正常顯示。

運(yùn)行效果

輸入密碼階段：

密碼正確，解密并顯示圖片：

解密并顯示圖片的源碼：

注：base64編碼很長(zhǎng)，因此在下面的源碼中沒(méi)有展示，實(shí)測(cè)時(shí)，之前的代碼會(huì)輸出base64編碼，復(fù)制過(guò)來(lái)使用即可。

<html>
    <script>
        function jm(){
            var pass = prompt('請(qǐng)輸入口令','');
            if (pass != "1"+"2"+"3"){
                alert("口令錯(cuò)誤。");
            }
            else{
                var base64_2 = document.getElementById("encode_base64").src.toString();
                //解密
                var base64_3 = base64_2.substring(0,26) + base64_2.substring(27,base64_2.length);
                document.getElementById("pic").src=base64_3;
                console.log(base64_3)
            }
        }
    </script>
    <img id="pic">
    <a onclick="jm()">點(diǎn)此解密并顯示圖片</a>
    <img id= "encode_base64" src="此處填入之前加密生成的base64編碼">
</html>

可能有人已經(jīng)發(fā)現(xiàn)：雖然圖片編碼經(jīng)過(guò)了加密，而且增加了口令保護(hù)，但是只要查看網(wǎng)頁(yè)源碼，就可以知道口令，這樣完全沒(méi)有起到加密的效果。

到目前為止，確實(shí)存在這個(gè)問(wèn)題。所以，還要更進(jìn)一步：

真正的加密

口令可以被看到，是因?yàn)閖avascript代碼透明，那么，就要對(duì)解密的js代碼加密了，加密后，口令將不可見(jiàn)！

用JShaman對(duì)JS代碼進(jìn)行混淆加密：

并在JShaman的配置中勾選擇“字符串加密”：

加密后的代碼將完全找不到之前的口令字符：

在網(wǎng)頁(yè)中查看，加密的JS代碼，其中搜索不到口令“123”：

這樣就實(shí)現(xiàn)了完整的圖片加密：將圖片加密存放到了單獨(dú)的html中，可以方便的攜帶、存儲(chǔ)、傳遞。

而內(nèi)容是加密的、口令也是加密的。只有知道口令的人，才能看到圖片，安全又私密。

tml網(wǎng)頁(yè)源碼加密

html網(wǎng)頁(yè)源碼能加密嗎？能加密到何種程度？

某些時(shí)候，我們可能需要對(duì)html網(wǎng)頁(yè)源碼加密，使網(wǎng)頁(yè)源碼不那么容易被他人獲得。出于這個(gè)目標(biāo)，本文測(cè)試一種html加密方式。

提前透露：結(jié)論超出預(yù)期，似乎還實(shí)現(xiàn)了反爬蟲(chóng)。

首先來(lái)到網(wǎng)址：http://fairysoftware.com/html_jia_mi.html

由頁(yè)面介紹可知，這是一種使用js和escape結(jié)合實(shí)現(xiàn)的html加密。

直接使用頁(yè)面提供的例程，加密這一段html代碼：

得到加密的html代碼，如下圖：

然后將加密代碼粘貼到一個(gè)html文件中測(cè)試，如下圖：

頁(yè)面可以正常打開(kāi)。查看網(wǎng)頁(yè)源碼，果然源碼是加密的，如下圖：

特別的驚喜之處是：

如上圖所示，鏈接果然消失了。

即使用開(kāi)發(fā)者工具查看，也無(wú)法得到鏈接地址，而原始未加密前的html代碼中是有鏈接的，如下圖：

那么消失了的鏈接，還能正常點(diǎn)擊嗎？

點(diǎn)擊，鏈接可以正常打開(kāi)：

雖然href鏈接隱藏了，但還能正常打開(kāi)頁(yè)面，功能完全正常。

測(cè)試結(jié)果既驚喜又意外，這樣的html網(wǎng)頁(yè)加密，效果還真是不錯(cuò)，值得一用。

登陸進(jìn)入

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

歡迎光臨

function loopy(){

var mima ="";

while(mima!="176901111*"){mima=prompt("請(qǐng)輸入我的手機(jī)號(hào)碼");}

alert("打開(kāi)了"); }

loopy()

</script>

</body>

[贊]關(guān)注一下天天新的html代碼發(fā)布

[比心][比心][比心][比心][比心][比心][比心][比心][比心][比心][比心]

在線咨詢(xún)

上一篇：JavaScript編程 Cookie
下一篇：HTML 文件路徑

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

JavaScript奇淫技巧：用密碼保護(hù)你的照片

第一步、壓縮圖片

第二步、加密圖片

您的項(xiàng)目需求