項目回顧1-圖片上傳-form表單還是base64-前端圖片壓縮

標籤：

第一個項目終於上線了，是一個叫親青籌的公益眾籌平台，端，電腦端還有後台介面大部分都是我完成的，幾個月過來，感覺收穫了很多，覺得要總結一下。

首先想到的是圖片上傳的問題。在通常表單資料都是ajax上傳的情況下，為了上傳圖片而去使用form表單感覺很蠢。然後那時候也沒有想到用jquery form外掛程式。

背景同事給的方案是用iframe裡寫一個form表單，然後上傳圖片之後自動認可表單，他將圖片在伺服器上的地址以跳轉頁url的一部分，我再來截取的方式。

方案一：iframe+form表單

    <form action="/user/uploadIdCard.do" class="fileForm picUpload" enctype="multipart/form-data" method="post">        <input type="file" id="uploadPic" name="file">        <label for="uploadPic" id="fileBtn">            +            <img src="" />        </label>        <input type="text" name="turnUrl" class="turnUrl">    </form>

 

    $(".turnUrl").val(window.location.pathname);    $("#uploadPic").on(‘change‘, function(event) {        event.preventDefault();        $("form").submit();    });

在需要上傳圖片的介面引入iframe，在調用公用庫裡的iframe方法，獲得圖片的url並且把圖片顯示在iframe中

// 提取iframe裡的路徑function iframe(el) {    var baseurl = "";    var code, filePath;    var place = $(el)[0].contentWindow.location.search;    console.log(place);    if (place) {        code = place.match(/code=\d+/)[0].substr(5);        if (place.match(/filepath=\S+/)) {            filePath = place.match(/filepath=\S+/)[0].substr(9);        }        $(el).contents().find(".tip").css(‘color‘, ‘#d0021b‘);        console.log(filePath);        switch (code) {            case "200":                $(el).contents().find(".tip").text(‘上傳成功‘);                $(el).contents().find(".tip").css(‘color‘, ‘#55a012‘);                $(el).contents().find("#fileBtn>img").show().attr("src", baseurl + "/" + filePath);                return "/" + filePath;            case "206":                $(el).contents().find(".tip").text(‘檔案過大‘);                break;            case "207":                $(el).contents().find(".tip").text(‘檔案類型錯誤‘);                break;            case "208":                $(el).contents().find(".tip").text(‘系統錯誤‘);        }    }}

方案二：後來發現這樣的做法有兩個問題，一個是使用者發的圖片太大，後台沒有做壓縮（背景同事太忙了，為了遷就他們，就我們前端做壓縮了）。第二個是，上傳圖片成功之後，圖片顯示在iframe上，這樣需要一定的反應時間，使用者有時候會反映圖片傳不上去，其實只是後台還沒有返回……

於是決定用base64上傳到背景方式

    <input type="file" id="uploadPic" name="file">    <label for="uploadPic" id="fileBtn">        +        <img class="showPic" src="" />    </label>    <span class="tip">請上傳圖片，大小在2M以內<br/>(圖片類型可為jpg,jepg,png,gif,bmp)<br/>推薦圖片比例為640*400</span>    <input type="text" name="turnUrl" class="turnUrl">    <canvas id="uploadImg" style="display:none"></canvas>

結構和原來差不多，只是多了一個canvas

    $("#uploadPic").on(‘change‘, function(event) {        event.preventDefault();        console.log($(this)[0].files);        var file = $(this)[0].files[0];        if(file.size>2097152){            alert("上傳圖片請小於2M");            return false;        }        if (!/image\/\w+/.test(file.type)) {            alert("檔案必須為圖片！");            return false;        }        var reader = new FileReader();        reader.readAsDataURL(file);        reader.onload = function(e) {                createCanvas(this.result);            }    });    function createCanvas(src) {        var canvas = document.getElementById("uploadImg");        var cxt = canvas.getContext(‘2d‘);        canvas.width = 640;        canvas.height = 400;        var img = new Image();        img.src = src;        img.onload = function() {            // var w=img.width;            // var h=img.height;            // canvas.width= w;            // canvas.height=h;            cxt.drawImage(img, 0, 0,640,400);            //cxt.drawImage(img, 0, 0);            $(".showPic").show().attr(‘src‘, canvas.toDataURL("image/jpeg", 0.9));            $.ajax({                url: "/front/uploadByBase64.do",                type: "POST",                data: {                    "imgStr": canvas.toDataURL("image/jpeg", 0.9).split(‘,‘)[1]                },                success: function(data) {                    console.log(data);                    $(".showPic").show().attr(‘data-url‘,"/"+ data.url);                }            });        }    }

1.首先是用的input的file檔案的資訊，判斷檔案大小file.size，以及檔案是否為圖片file.type

2.再通過html5的FileReader介面來獲得這個圖片的base64資料

3.將這個base64傳入canvas中，作為一張圖的src,這時候可以設定圖片的解析度大小，保證上傳的圖都是統一的解析度。當然也可以按照圖片原來的大小。

4.在ajax之前，把處理後的base64直接顯示出來（這樣使用者就可以立刻看到自己上傳的圖片），再將 canvas.toDataURL("image/jpeg", 0.9).split(‘,‘)[1] （類型為image/jpeg，就可以用第二個參數來設定畫質了）傳到後台對應的介面

5.再將後台返回的url 綁在圖片的data-url屬性上，在ajax上交整個表單時擷取這個data-url就好了，這樣使用者可以最快時間看到，而url其實還在ajax到背景過程中

後記：這兩個方案都有一個問題，會給後台上傳很多冗餘圖片。不過背景同事貌似沒什麼意見，囧。

實際效果是這樣的 http://www.qqchou.org/qqcweb/pages/photoIframe.html 

 

項目回顧1-圖片上傳-form表單還是base64-前端圖片壓縮