前端實現的canvas支持多圖壓縮並打包下載的工具

# 技術棧

canvas

jszip.js(網頁端壓縮解壓縮插件JSZIP庫)

FileSaver.js(文件保存到本地庫)

在線預覽：http://htmlpreview.github.io/?https://github.com/xiaoqiuxiong/imageCompressionTool/master/index.html
github: https://github.com/xiaoqiuxiong/imageCompressionTool

解讀

• 以上的工具，暫時只是配置了容許png和jpg格式的圖片壓縮，如需別的格式的請自行到個人github上面clone下載自行修改；
• 壓縮質量：10份；
• 壓縮會自動打包成zip,自行下載解壓，壓縮速度驚人。
• 壓縮速度我以爲比熊貓壓縮牛逼。

工具預覽

直接解讀源碼：(html)

<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-Yusvt3iA-1562061874770)(https://mp.csdn.net/mdeditor/'%20+%20getObjectURL(files[i])]%20+%20')</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>

使用方法：

github: https://github.com/xiaoqiuxiong/imageCompressionTool
直接Git克隆下來,而後瀏覽器（最好使用谷歌瀏覽器）打開idnex.html頁面，即刻輕鬆使用了。
之後均可以使用了，不再用用什麼熊貓壓縮了。
一鍵壓縮，就是吊！
好用的話，記得加星。