三款不錯的圖片壓縮上傳插件(webuploader+localResizeIMG4+LUploader)

時間 2019-11-18

標籤不錯圖片壓縮上傳插件 webuploader+localresizeimg4+luploader webuploader localresizeimg luploader 简体版

原文原文鏈接

涉及到網頁圖片的交互，少不了圖片的壓縮上傳，相關的插件有不少，相信你們都有用過，這裏我就推薦三款，至於好處就仁者見仁嘍：php

1.名氣最高的WebUploader，由Baidu FEX 團隊開發，以H5爲主，FLASH爲輔，兼容 IE6+，iOS 6+, android 4+，採用大文件分片併發上傳，極大的提升了文件上傳效率，看了官方文檔就知道，能知足你所須要的全部功能，一言以蔽之，大而全；至於缺點，大概就是插件體積太大了，自帶樣式文件，並且還要依賴jquery類庫。詳細的教程網上俯拾便是，這裏我就附上一段簡單的demo：css

<!Doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'/>
    <meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no'/>
    <title>實驗</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .progress{
            height:50px;
            background-color: red;
        }
    </style>
    <link rel="stylesheet" href="assets/webuploader.css">
</head>
<body>

    <div class="myuploader">
        <!--用來存放文件信息-->
        <div class="uploader-list">
        </div>
        <!-- 放置按鈕 -->
        <div class="btns">
            <div id="picker">選擇文件</div>
            <!-- <button class="send">開始上傳</button> -->
        </div>
    </div>
    <img src="" alt="" />
    <div class="state"></div>
    <div class="progess"></div>
    
    <script src="assets/jquery-1.12.0.js"></script>
    <script src="assets/webuploader.html5only.min.js"></script>
    <script> 
        //  初始化WebUploader    
        var uploader = WebUploader.create({
            // 選完文件後是否自動上傳
            auto:true,            

            // 文件接收的服務端路徑
            server:'http://webuploader.duapp.com/server/fileupload.php',

            // 選擇文件的按鈕
            pick:'#picker',

            // 只容許選擇圖片文件
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png' //若是寫成image/*會出現響應慢的問題
            },     

            // 配置生成縮略圖的選項
            thumb:{
                // 縮略圖的寬高，當取值介於0-1時，被當成百分比使用
                width:500,
                height:250,
                // 強制轉換成指定的類型
                type:"image/jpeg",
                // 圖片質量，只有type爲image/jpeg的時候纔有效
                quality:70,
                // 是否容許放大，若是想要生成小圖的時候不失真，此選項應該設置爲false
                allowMagnify:true,
                // 是否容許裁剪
                crop:true            
            },      

            // 是否壓縮圖片, 默認若是是jpeg文件上傳前會壓縮，若是是false, 則圖片在上傳前不進行壓縮
            compress:{
                // 壓縮後的尺寸
                width: 100,
                height: 100,
                // 圖片質量，只有type爲image/jpeg的時候纔有效。
                quality: 90,
                // 是否容許放大，若是想要生成小圖的時候不失真，此選項應該設置爲false
                allowMagnify: false,
                // 是否容許裁剪
                crop: false,
                // 是否保留頭部meta信息
                preserveHeaders: true,
                // 若是發現壓縮後文件大小比原來還大，則使用原來圖片，此屬性可能會影響圖片自動糾正功能
                noCompressIfLarger: false,
                // 單位字節，若是圖片大小小於此值，不會採用壓縮
                compressSize: 0
            }
        });
        // 監聽fileQueued事件來處理UI邏輯，當有一批文件被添加進隊列改用filesQueued
        uploader.on('fileQueued', function( file ) {
            // 能夠在控制檯中查看file對象的詳細信息
            console.log(file);
            // 建立縮略圖 makeThumb，還能夠寫成(file,callback,width,height)
            uploader.makeThumb(file,function(error,src) {
                if (error) {
                    console.log("不能預覽");
                    return;
                }else{
                    $("img").attr('src',src);  
                }
            });               
        });         
        // 文件上傳開始
        uploader.on('startUpload', function(file) {
            $(".state").text('開始');
        });     
        // 文件上傳進度
        uploader.on('uploadProgress', function(file,percentage) {
            $(".progress").css('width', percentage * 100 + "%" );
        });              
        // 文件上傳成功
        uploader.on('uploadSuccess', function(file) {
            console.log("成功");
            $(".state").text('已上傳');
        });
        // 文件上傳失敗
        uploader.on('uploadError', function(file) {
            console.log("失敗");
            $(".state").text('上傳出錯');
            // 獲取文件統計信息
            console.log(uploader.getStats());
            //
            console.log(uploader.getFiles('error'));
        });
        // 文件上傳完成
        uploader.on('uploadComplete', function(file) {
            console.log("完成");
            $(".progress").fadeOut();
        });                
    </script>
</body>
</html>

2.移動端的插件，若是能脫離jquery，而且能知足項目的基本需求就再好不過了，這裏像localResizeIMG就作得不錯，它有4個歷史版本，建議引入最新穩定版本localResizeIMG4，demo以下（樣式要本身寫）：html

<!Doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'/>
    <meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no'/>
    <title>實驗</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
    </style>
</head>
<body>
    <!-- capture="camera"能夠出現拍照；accept="image/*"僅接受圖片 -->
    <input type="file" id="file" name="logo" capture="camera" >

    <!-- 通常狀況下引入lrz.bundle.js，但絕對不要刪除目錄下的*.chunk.js，這些文件分別對應了IOS和Android的兼容代碼，檢測到符合環境時會自動引入，lrz.all.bundle.js是包含了全部引用了，莫名其妙的問題下就引用這個吧 -->
    <script src="assets/lrz.bundle.js"></script>
    <script> 
        // 經過change事件能夠獲得用戶選擇的圖片
        document.querySelector("input").addEventListener("change",function(){
            // this.files[0]就是用戶選擇的文件，當作參數傳入lrz(file, [options])，或者直接傳入圖片路徑
            // [options]中的width表示圖片最大不超過的寬度，默認爲原圖寬度，height不設時會適應寬度；quality表示圖片壓縮質量，取值 0 - 1，默認爲0.7；fieldName表示後端接收的字段名，默認爲 file
            lrz(this.files[0], {width: 1024})
            // 上述返回值是一個promise對象，後面能夠接then(rst) catch(err) always()
            .then(function(rst){
                // 經過圖片的預加載來實現圖片預覽
                var img = new Image();// 建立一個Image對象
                // 先綁定onload事件，而後再給src賦值，緣由好像是爲了解決ie，opera下的兼容問題  
                // 圖片加載完畢時異步調用
                img.onload = function () {
                    console.log("圖片加載完畢")
                    img.onload = null; // 解決內存泄漏，同時避免動態圖片的事件屢次觸發  
                    document.body.appendChild(img);
                };                 
                img.src = rst.base64;// 載入生成後的圖片base64
                // 返回rst便於鏈式調用
                return rst;    
            })
            .then(function(rst){
                // 除了以上的內容，rst.formData表示後端可處理的數據；rst.file表示壓縮後的對象；rst.fileLen表示生成後的圖片大小；rst.base64Len表示生成後的base的大小；rst.origin表示原始的對象，包括大小，日期等信息               
                console.log(rst.formData)
                //能夠在這裏寫ajax的上傳代碼，原生和jquery的均可以
                // 返回rst便於鏈式調用
                return rst;                   
            })
            .catch(function(err){
                // 萬一出錯了，這裏能夠捕捉到錯誤信息，並且以上的then都不會執行
                alert(err);
            })
            .always(function(){
                // 無論是成功失敗，這裏都會執行
                console.log("執行完成")
            })
        })
    </script>
</body>
</html>

3.以上兩款優缺點一目瞭然，本人公司用的是LUploader，純原生js寫的，不依賴任何類庫，壓縮後的js文件只有5k，實現圖片壓縮上傳只需三步：html5

(1)在html頁面中引入input標籤，經過自定義屬性data-LUploader綁定點擊觸發的標籤id：jquery

<div class="LUploader" id="demo1">
        <div class="LUploader-container">
            <input data-LUploader='demo1' data-form-file='basestr' data-upload-type='front' type="file" />
            <ul class="LUploader-list"></ul>
        </div>
        <div>
            <div class="icon"></div>
            <p>單擊上傳</p>
        </div>
</div>

(2)將樣式文件和js文件引入到頁面中：android

<link rel="stylesheet" href="css/LUploader.css">
<script src="js/LUploader.js"></script>

(3)js腳本中初始化插件：web

new LUploader(這裏放須要綁定的input對象做爲參數, {
            url: '',//post請求地址
            multiple: false,//是否一次上傳多個文件 默認false
            maxsize: 102400,//忽略壓縮操做的文件體積上限 默認100kb
            accept: 'image/jpg,image/jpeg,image/png',//若是寫成image/*會出現響應慢的問題
            quality: 0.1,//壓縮比 默認0.1  範圍0.1-1.0 越小壓縮率越大
            showsize:false//是否顯示原始文件大小 默認false
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。