技術棧：
canvas
jszip.js(網頁端壓縮解壓縮外掛JSZIP庫)
FileSaver.js(檔案儲存到本地庫)
直接解讀原始碼：
<div class="cont">
<div class="uploadBtn">選擇圖片<input name="file" accept="image/png, image/jpeg" multiple type="file" id="file"></div>
<br>
<br>
<div class="selectbox">
<div>請選擇壓縮質量</div>
<select id="encoderOptions">
<option value="0.1">10%</option>
<option value="0.2">20%</option>
<option value="0.3">30%</option>
<option value="0.4">40%</option>
<option value="0.5" selected>50%</option>
<option value="0.6">60%</option>
<option value="0.7">70%</option>
<option value="0.8">80%</option>
<option value="0.9">90%</option>
<option value="1">100%</option>
</select>
</div>
<br>
<div id="show">
<br>
<br>
需要壓縮的圖片:
<br>
<br>
<ul id="selectView"></ul>
<br>
</div>
<div id="compressBox">
<button id="active" onclick="startCompress()">壓縮圖片並下載</button>
</div>
</div>
<canvas id="canvas"></canvas>
js部分：
<!-- 網頁端壓縮解壓縮外掛JSZIP庫 -->
<script src="jszip.min.js"></script>
<!-- 檔案儲存到本地庫 -->
<script src="FileSaver.js"></script>
<!--用於檔案下載-->
<script>
// 圖片質量(0-1)
var encoderOptions = 0.5;
// 獲取input
var filesInput = document.querySelector('#file')
// 獲取壓縮按鈕
var compressBox = document.querySelector('#compressBox')
// 選擇圖片展示視口
var selectView = document.querySelector('#selectView')
// 獲取選擇圖片後展示的視口
var show = document.querySelector('#show')
var encoderOptionInput = document.querySelector('#encoderOptions')
// 所有的選擇檔案
var files;
var canvas;
var ctx;
// new JSZip物件
var zip = new JSZip();
// 建立images資料夾，用來存在壓縮完成的圖片
var imgFolder = zip.folder("images");
// 監聽input選擇檔案的變化
filesInput.onchange = function() {
// 獲取所有file
files = filesInput.files
// 如果選擇files數量大於0就顯示壓縮操作
if (files.length > 0) {
show.style.display = 'block'
compressBox.style.display = 'block'
}
// 拼接縮圖列表
var html = ''
for (var i = 0; i < files.length; i++) {
html += '<li><img width="60" height="60" src="' + getObjectURL(files[i]) + '" alt="" /></li>'
}
// 插入拼接的圖片列表
selectView.innerHTML = html
}
// 壓縮圖片的方法
function startCompress() {
demo(files[0], 0)
}
// 利用遞迴迴圈files
function demo(file, num) {
if (num <= files.length - 1) {
encoderOptions = parseFloat(encoderOptionInput.value)
// 獲取file的base64地址
var imgsrc = getObjectURL(file)
// 獲取檔名稱
var name = file.name
// 監聽如果轉換base64地址成功，就執行下面的
if (imgsrc) {
// 建立image,並動態複製src
var img = new Image()
img.src = imgsrc
// 監聽img圖片載入完成
img.onload = () => {
// 獲取canvas標籤
canvas = document.querySelector('#canvas')
// 獲取上下文
ctx = canvas.getContext('2d')
// 根據圖片寬高設定canvas的寬高
canvas.width = img.width
canvas.height = img.height
// 在canvas上面畫圖片
ctx.drawImage(img, 0, 0, img.width, img.height);
// 把canvas轉成路徑
// canvas.toDataURL(type, encoderOptions);
// 引數
// type 可選
// 圖片格式， 預設為image / png
// encoderOptions 可選
// 圖片質量。 取值範圍為0到1。 如果指定圖片格式為image / jpeg或image / webp。 如果超出取值範圍， 將會使用預設值0 .92。 其他引數會被忽略。
var typeTxt = 'image/jpeg'
if (name.indexOf('png') != -1) {
typeTxt = 'image/png'
}
var imgdata = canvas.toDataURL(typeTxt, encoderOptions)
// 分割base64
imgdata = imgdata.split(',')
// 新增圖片到資料夾
imgFolder.file(name, imgdata[1], { base64: true });
// 如果當前的標記和檔案的數量相等的話，就說明壓縮新增到檔案到資料夾已經完成了，可以壓縮下載了。
if (num == files.length - 1) {
zip.generateAsync({ type: "blob" })
.then(function(content) {
// 建立的zip的檔名稱是images
saveAs(content, "images.zip");
location.reload()
});
} else {
// 如果沒有到標記，就繼續回撥
num++
demo(files[num], num)
}
}
}
}
}
// 獲取file 的base64路徑
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
</script>
css部分：
<style>
*{
padding: 0;
margin: 0;
background-color: #000;
color: #DC143C;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
user-select: none;
}
html,body{
overflow: hidden;
padding: 20px;
box-sizing: border-box;
}
h3{
text-align: center;
}
#compressBox{
display: none;
}
#canvas{
position: fixed;
top: -100000px;
left: -100000px;
opacity: 0;
}
.cont{
margin-top: 20px;
padding: 20px;
box-sizing: border-box;
border: 1px solid #DC143C;
border-radius: 10px;
background-color: #fff;
font-size: 13px;
min-height: 80px;
}
.uploadBtn{
position: relative;
display: inline-block;
padding: 0 20px;
line-height: 28px;
background-color: #fff;
border: 1px solid #DC143C;
font-size: 12px;
border-radius: 30px;
text-align: center;
cursor: pointer;
width: 300px;
}
.uploadBtn input{
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
#selectView{
background-color: #fff;
}
#selectView li{
background-color: #fff;
display: inline-block;
margin-right: 10px;
}
#compressBox{
height: 60px;
background-color: #fff;
}
#active{
position: absolute;
left: 50%;
transform: translateX(-50%);
display: block;
padding: 0 20px;
line-height: 28px;
background-color: #DC143C;
border: 1px solid #DC143C;
font-size: 12px;
border-radius: 30px;
text-align: center;
cursor: pointer;
width: 300px;
color: #fff;
}
#show{
display: none;
background-color: #fff;
}
.help{
position: fixed;
font-size: 12px;
bottom: 20px;
left: 0;
text-align: center;
width: 100%;
}
.selectbox{
background-color: #fff;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.selectbox input,.selectbox div,.selectbox select{
background-color: #fff;
}
.selectbox div{
padding-right: 20px;
}
</style>
解讀：
1、以上的工具，暫時只是配置了允許png和jpg格式的圖片壓縮，如需別的格式的請自行到我的github上面clone下載自行修改；
2、壓縮質量：10份；
3、壓縮會自動打包成zip,自行下載解壓，壓縮速度驚人。，
4、壓縮速度我覺得比熊貓壓縮牛逼。
使用方法：
github: https://github.com/xiaoqiuxiong/imageCompressionTool
直接Git克隆下來,然後瀏覽器（最好使用谷歌瀏覽器）開啟idnex.html頁面，即刻輕鬆使用了。
以後都可以使用了，再也不用用什麼熊貓壓縮了。
一鍵壓縮，就是吊！
好用的話，記得加星。
<style> *{ padding: 0; margin: 0; background-color: #000; color: #DC143C; -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;user-select: none; } html,body{ overflow: hidden; padding: 20px; box-sizing: border-box; } h3{ text-align: center; } #compressBox{ display: none; } #canvas{ position: fixed; top: -100000px; left: -100000px; opacity: 0; } .cont{ margin-top: 20px; padding: 20px; box-sizing: border-box; border: 1px solid #DC143C; border-radius: 10px; background-color: #fff; font-size: 13px; min-height: 80px; } .uploadBtn{position: relative;display: inline-block;padding: 0 20px;line-height: 28px;background-color: #fff;border: 1px solid #DC143C;font-size: 12px;border-radius: 30px;text-align: center;cursor: pointer;width: 300px; } .uploadBtn input{ opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; } #selectView{ background-color: #fff; } #selectView li{ background-color: #fff; display: inline-block; margin-right: 10px; } #compressBox{ height: 60px; background-color: #fff; } #active{ position: absolute;left: 50%;transform: translateX(-50%);display: block;padding: 0 20px;line-height: 28px;background-color: #DC143C;border: 1px solid #DC143C;font-size: 12px;border-radius: 30px;text-align: center;cursor: pointer;width: 300px;color: #fff; } #show{ display: none; background-color: #fff; } .help{ position: fixed; font-size: 12px; bottom: 20px; left: 0; text-align: center; width: 100%; } .selectbox{ background-color: #fff; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } .selectbox input,.selectbox div,.selectbox select{ background-color: #fff; } .selectbox div{ padding-right: 20px; } </style>