這篇文章主要介紹了JavaScript怎么壓縮并加密圖片的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇JavaScript怎么壓縮并加密圖片文章都會有所收獲，下面我們一起來看看吧。
壓縮原理：
將圖片讀入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/*">
壓縮后的圖片：<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>運行效果：
壓縮率
上圖中可以看到，壓縮后圖片的大小是28KB，而原始的文件大小是400多KB：
可見，壓縮效果還是非常不錯的。
前面所述的圖片壓縮，是很實用的技術，接下來才是本文重點，展示一個奇淫技巧：圖片加密。
之所以即講壓縮壓縮，又談圖片加密，是因為圖片加密是于前面壓縮技術的基礎上完成的。
上面的代碼中，toDataURL產生的是圖片的base64編碼。
Base64編碼必須是完整且正確才能正常顯示圖片。
而只需對此編碼做小小修改，哪怕僅是改動一個字符，也會讓圖片無法正常顯示。
那么，程序中給編碼某個位置增加一個字符，以達到破壞正確編碼進而實現加密的效果：
運行效果，輸出加密后的base64編碼：
測試一下：
效果如下，圖片無法正常顯示。
那么，接下來將實現這樣的效果：
在網頁中，用img的src引入加密的base64字符，此時圖片是不能顯示的。然后，可以輸入密碼，當密碼正確時，解密base64字符，讓圖片正常顯示。
輸入密碼：
密碼正確，解密并顯示圖片：
源碼：
<script>
function jm(){undefined
var pass = prompt('請輸入口令','');
if (pass != "1"+"2"+"3"){undefined
alert("口令錯誤。");
}
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>網頁中還有另外幾個元素：
input中用于存放加密的base64編碼，即上文中的js代碼功能所生成并加密的內容；
img用于顯示解密后的圖片；還有一個按鈕，點擊時調用解密函數。
可能有人已經發現：雖然圖片編碼經過了加密，而且增加了口令保護，但是只要查看網頁源碼，就可以知道口令，這樣完全沒有起到加密的效果。
到目前為止，確實存在這個問題。所以，還要更進一步：
口令可以被看到，是因為javascript代碼透明，那么，就要對解密的js代碼加密了，加密后，口令將不可見。
用JShaman對JS代碼進行混淆加密：
并在JShaman的配置中勾選擇“字符串加密”：
加密后的代碼將完全找不到之前的口令字符：
這樣就實現了完整的圖片加密：將圖片加密存放到了單獨的html中，可以方便的攜帶、存儲、傳遞。而內容是加密的、口令也是加密的。只有知道口令的人，才能看到圖片。
關于“JavaScript怎么壓縮并加密圖片”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“JavaScript怎么壓縮并加密圖片”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
