<body>
<script src="jquery-3.5.1.min.js"></script>
<input id="file" type="file" capture="microphone" accept="image/*">

壓縮后的圖片：<span id="sz"></span>

<img id="pic" >
<script>
$("#file").change(function(){undefined
var m_this = this;
cutImageBase64(m_this,null,900,0.7);
})
function cutImageBase64(m_this,id,wid,quality) {undefined
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() {undefined
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({undefined
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>

運(yùn)行效果：

壓縮率

上圖中可以看到，壓縮后圖片的大小是28KB，而原始的文件大小是400多KB：

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

二、加密圖片

前面所述的圖片壓縮，是很實(shí)用的技術(shù)，接下來才是本文重點(diǎn)，展示一個(gè)奇淫技巧：圖片加密。

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

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

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

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

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

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

測試一下：

效果如下，圖片無法正常顯示。

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

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

輸入密碼：

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

源碼：

<script>
function jm(){undefined
var pass = prompt('請輸入口令','');
if (pass != "1"+"2"+"3"){undefined
alert("口令錯(cuò)誤。");
}
else{undefined
var base64_2 = document.getElementById("txt").value.toString();
//解密
var base64_3 = base64_2.substring(0,26) + base64_2.substring(27,base64_2.length);
document.getElementById("pic").src=base64_3;
document.getElementById("bt").style.display = "none";
}
}
</script>

網(wǎng)頁中還有另外幾個(gè)元素：