整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
avaScript奇淫技巧：密碼保護的私密圖片
JavaScript奇淫技巧：圖片壓縮、圖片加密
本文將用JavaScript實現(xiàn)兩個頗有技術含量的功能：圖片壓縮、圖片加密。
最終效果：可實現(xiàn)將任意圖片加密、壓縮，并保存到一個獨立的html頁面中，輸入正確的密碼，才能看到原圖。
效果演示：
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
技術原理
將圖片讀入canvas，并使用canvas的toDataURL方法將圖片base64化，在此過程中，可以設定quality值，即圖片質(zhì)量值，值為0.1到1之間，值越小，壓縮度越高。
完整代碼
保存為html文件即可運行。
<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>運行效果
壓縮率
本例，運行時加載任何一張本地圖片。從上圖中可以看到，壓縮后圖片的大小是41KB，而原始的文件大小是1MB：
可見，壓縮效果還是非常不錯的。
前面所述的圖片壓縮，是很實用的技術，接下來，展示另一個奇淫技巧：圖片加密。
之所以即講壓縮壓縮，又談圖片加密，是因為圖片加密是于前面壓縮技術的基礎上完成的。
上面的代碼中，toDataURL產(chǎn)生的是圖片的base64編碼。
Base64編碼必須是完整且正確才能正常顯示圖片。
而只需對此編碼做小小修改，哪怕僅是改動一個字符，也會讓圖片無法正常顯示。
那么，程序中給編碼某個位置增加一個字符，以達到破壞正確編碼進而實現(xiàn)加密的效果：
運行效果，輸出加密后的base64編碼：
測試一下，這段動過手腳的base64編碼以圖片方式加載，看是否能顯示圖片。
效果如下，圖片無法正常顯示。
那么，接下來將實現(xiàn)這樣的效果：
在網(wǎng)頁中，用img的src引入加密的base64字符，此時圖片是不能顯示的。然后，可以輸入密碼，當密碼正確時，解密base64字符，讓圖片正常顯示。
運行效果
輸入密碼階段：
密碼正確，解密并顯示圖片：
解密并顯示圖片的源碼：
注：base64編碼很長，因此在下面的源碼中沒有展示，實測時，之前的代碼會輸出base64編碼，復制過來使用即可。
<html>
<script>
function jm(){
var pass = prompt('請輸入口令','');
if (pass != "1"+"2"+"3"){
alert("口令錯誤。");
}
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()">點此解密并顯示圖片</a>
<img id= "encode_base64" src="此處填入之前加密生成的base64編碼">
</html>可能有人已經(jīng)發(fā)現(xiàn)：雖然圖片編碼經(jīng)過了加密，而且增加了口令保護，但是只要查看網(wǎng)頁源碼，就可以知道口令，這樣完全沒有起到加密的效果。
到目前為止，確實存在這個問題。所以，還要更進一步：
真正的加密
口令可以被看到，是因為javascript代碼透明，那么，就要對解密的js代碼加密了，加密后，口令將不可見！
用JShaman對JS代碼進行混淆加密：
并在JShaman的配置中勾選擇“字符串加密”：
加密后的代碼將完全找不到之前的口令字符：
在網(wǎng)頁中查看，加密的JS代碼，其中搜索不到口令“123”：
這樣就實現(xiàn)了完整的圖片加密：將圖片加密存放到了單獨的html中，可以方便的攜帶、存儲、傳遞。
而內(nèi)容是加密的、口令也是加密的。只有知道口令的人，才能看到圖片，安全又私密。
tml網(wǎng)頁源碼加密
html網(wǎng)頁源碼能加密嗎？能加密到何種程度？
某些時候，我們可能需要對html網(wǎng)頁源碼加密，使網(wǎng)頁源碼不那么容易被他人獲得。出于這個目標，本文測試一種html加密方式。
提前透露：結(jié)論超出預期，似乎還實現(xiàn)了反爬蟲。
首先來到網(wǎng)址：http://fairysoftware.com/html_jia_mi.html
由頁面介紹可知，這是一種使用js和escape結(jié)合實現(xiàn)的html加密。
直接使用頁面提供的例程，加密這一段html代碼：
得到加密的html代碼，如下圖：
然后將加密代碼粘貼到一個html文件中測試，如下圖：
頁面可以正常打開。查看網(wǎng)頁源碼，果然源碼是加密的，如下圖：
特別的驚喜之處是：
如上圖所示，鏈接果然消失了。
即使用開發(fā)者工具查看，也無法得到鏈接地址，而原始未加密前的html代碼中是有鏈接的，如下圖：
那么消失了的鏈接，還能正常點擊嗎？
點擊，鏈接可以正常打開：
雖然href鏈接隱藏了，但還能正常打開頁面，功能完全正常。
測試結(jié)果既驚喜又意外，這樣的html網(wǎng)頁加密，效果還真是不錯，值得一用。
登陸進入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
歡迎光臨
<script langguage="javascript">
function loopy(){
var mima ="";
while(mima!="176901111*"){mima=prompt("請輸入我的手機號碼");}
alert("打開了"); }
loopy()
</script>
</body>
[贊]關注一下天天新的html代碼發(fā)布
[比心][比心][比心][比心][比心][比心][比心][比心][比心][比心][比心]
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
