移動端圖片上傳后進行壓縮功能

移動端圖片上傳后進行壓縮功能

在進行講解上傳圖片壓縮之前，我們先來了解下HTML5中的文件上傳的基本知識點。

一： FileList對象與file對象。

FileList對象表示用戶選擇的文件列表。在HTML4中，file控件內只允許放置一個文件，但是到HTML5中，通過添加multiple屬性，file控件內允許一次放置多個文件。如下代碼：

<input type=”file” multiple/>

控件內的每一個用戶選擇的文件都是一個file對象，而FileList對象則為這些file對象的列表，代表用戶選擇的所有文件，file對象有2個屬性，name屬性代表文件名，不包括路徑，lastModifiedDate屬性表示文件的最后修改日期。

如下代碼：

HTML代碼：

選擇文件
    <input type="file" id="file" multiple />
    <input type="button" onclick = "showFileName()" value="文件上傳"/>

JS代碼如下：

<script>
        function showFileName() {
            var files = document.getElementById("file").files;
            for(var i = 0, ilen = files.length; i < ilen; i++) {
                alert(files[i].name);
                alert(files[i].lastModifiedDate);
            }
        }
</script>

如上input輸入框可以選擇任何類型的文件，但是我們也可以指定圖片文件，我們可以加一個屬性 accept=”image/*”  如下：

<input type=”file” id=”file” accept=”image/*” /> 

二：Blog對象。

在HTML5中，新增一個Blog對象，代表原始二進制數據，blog對象有2個屬性，size屬性表示一個blog對象的字節長度，type屬性表示blog的MIME類型，如果是未知類型，則返回一個空字符串。

如下代碼：

HTML代碼：

<h1 style="color:red;font-size:24px;">Blob對象</h1>
選擇文件
<input type="file" id="file2" accept="image/*" multiple/>
<input type="button" value="顯示文件信息" onclick="showFileType();"/>
文件字節長度:<span id="size"></span><br/>
文件類型: <span id="type"></span> <br/>

JS代碼如下：

function showFileType() {
    var file = document.getElementById("file2").files[0];
    var size = document.getElementById("size");
    // 顯示文件字節長度
    size.innerHTML = file.size;
    var type = document.getElementById("type");
    type.innerHTML = file.type;

}

三：FileReader對象

FileReader對象擁有5種方法，其中四種用以讀取文件。

1. readAsBinaryString 這個方法將Blog對象或文件中的數據讀取為二進制字符串，通常我們將它傳送給服務器，服務器可以通過這段字符串存儲文件。
2. readAsText 該方法有2個參數，其中第二個參數是文本的編碼方式，默認值為utf-8 這個方法容易理解，將blog對象或文件中的數據以文本方式讀取，讀取的結果即為這個文本文件中的內容。
3. readAsDataURL 該方法將Blog對象或文件中的數據讀取為一串Data URL字符串，該方法事實上將數據以一種特殊格式的URL地址形式直接讀入頁面。
4. readAsArrayBuffer：該方法將blog對象或文件中的數據讀取為一個ArrayBuffer對象。

FileReader事件如下：

1. onabort  數據讀取中斷時觸發。
2. onerror： 數據讀取出錯時觸發。
3. onloadstart 數據讀取開始時觸發。
4. onprogress  數據讀取中
5. onload 數據讀取成功完成時觸發。
6. onloadend  數據讀取完成時觸發，無論成功或者失敗。

打印文件名及文件最后修改時間demo 及讀取文件長度及讀取文件類型demo

 

讀取圖片，二進制及文本文件demo鏈接如下

下面我們可以看個上傳圖片的demo，如下：

 HTML代碼如下：

<h2>原來的圖像</h2>
    <img src="http://m3.img.srcdd.com/farm5/d/2015/0214/22/5127B4C55CEF418542B229E79B71C4D6_B500_900_169_56.jpeg" id="img"/>
    <h2>使用canvas生成的圖像</h2>
    <div id="imageToCanvas"></div>
    
    <h2>把canvas轉變為image圖像</h2>
    <div id="canvasToImage"></div>

    
    <h2>上傳圖片進行壓縮功能</h2>
    <div class="upload-img-div">
        <input type="text" class="inputstyle" id="inputstyle" name="photo1"/>
        <label class="file1" id="upload-img">上傳圖片</label>
        <input type="file" id="photo" name="photo" class="photo-ip">
    </div>
    <input class="submit-bt brand-submit" type="button" id="Submit_Button" value="提  交">
    <img src="" id="test" style="display:none;"/>

CSS代碼如下：

.upload-img-div {position:relative;overflow:hidden;}
    .inputstyle {float:left;width:380px;height:35px;border:1px solid #999;font-size:1.3em;}
    .file1 {float:left;width:80px;height:37px;line-height:37px;background:#81bb3b;color:#fff;font-size:14px;text-align:center;margin-left:10px;border-radius:5px;}
    .photo-ip {position:absolute;top:0;left:0;width:472px;height:39px !important;opacity:0;cursor:pointer;}
    .brand-submit {width:200px;height:30px;cursor:pointer;margin-top:20px;background:none;border:1px solid #fc6605;background:#fc6605;color:#fff;border-radius:5px;}

JS代碼如下：

window.onload = function() {
            // 把image 轉換為 canvas (畫布)
            function imageToCanvas(image) {
            
                var canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                canvas.getContext("2d").drawImage(image,0,0);
                return canvas;
            }
            var image = document.getElementById("img");
            var canvas = imageToCanvas(image);
            document.getElementById("imageToCanvas").appendChild(canvas);
        
            // 轉換canvas為image 假設圖片已經在canvas上生成好了，那么可以使用如下方法，把canvas轉變為image圖像
            function canvasToImage(canvas) {
                var img = new Image();
                // canvas.toDataURL 返回的是一串Base64編碼的URL
                console.log(canvas)
                // 指定格式 PNG 
                var newImageData = canvas.toDataURL('');

                // 打印出64位編碼
                console.log(newImageData);
                img.src = newImageData;
                return img;
            }
            document.getElementById("canvasToImage").appendChild(canvasToImage(canvas));

            
            //  上傳圖片 
            $("#photo").change(function(){
                alert(1)
                var value = $.trim($(this).val());
                if(value == "") {
                    return;
                }
                $("#inputstyle").val(value);
                
            });
            
            /**
             * 壓縮圖片
             * @param {Image} source_img_obj 圖片對象
             * @param {Integer} quality 圖片質量
             * @return {Image} output_format 輸出圖片格式
             */
            function compress(source_img_obj, quality, output_format) {
                var mime_type = "image/jpeg";
                if(output_format!=undefined && output_format=="png"){
                    mime_type = "image/png";
                }
                var cvs = document.createElement('canvas');
                cvs.width = source_img_obj.width;
                cvs.height = source_img_obj.height;
                var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);

                var newImageData = cvs.toDataURL(mime_type, quality/100);

                var result_image_obj = new Image();
                result_image_obj.src = newImageData;
                return {
                    "result_image_obj": result_image_obj,
                    "newImageData": newImageData
                };
            }
            $("#Submit_Button").click(function(){
                var file = document.getElementById("photo").files[0];
                var fileExt = $("#inputstyle").val();
                if(fileExt == "") {
                    alert("必須選擇一個文件");
                    return;
                }
                var reader = new FileReader();
                // 將文件以二進制的形式進行讀入頁面
                reader.readAsDataURL(file);
                reader.onload = function() {
                    var i = document.getElementById("test");
                    i.src = this.result;
                    var quality = 70;
                    var obj = compress(i,quality);
                    i.src = obj.result_image_obj.src;
                    var data = obj.newImageData;
                    console.log(data);
                    // post請求 可以把data數據傳過去
                }
            });
            
        }

一定要放在服務器下運行 否則會報錯，運行后效果如下：

64位壓縮后的編碼是我們需要的 然后就可以對圖片進行上傳了。