一、壓縮圖片

壓縮原理：

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

完整代碼：

<body>

<script src="jquery-3.5.1.min.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>

運行效果：

壓縮率

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

可見，壓縮效果還是非常不錯的。

二、加密圖片

前面所述的圖片壓縮，是很實用的技術，接下來才是本文重點，展示一個奇淫技巧：圖片加密。

之所以即講壓縮壓縮，又談圖片加密，是因為圖片加密是于前面壓縮技術的基礎上完成的。

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

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

而只需對此編碼做小小修改，哪怕僅是改動一個字符，也會讓圖片無法正常顯示。

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

運行效果，輸出加密后的base64編碼：

測試一下：

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

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

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

輸入密碼：

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

源碼：

<script>

function jm(){

var pass = prompt('請輸入口令','');

if (pass != "1"+"2"+"3"){

alert("口令錯誤。");

}

else{

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>