web前端實現圖片壓縮處理

連接地址：https://zhuanlan.zhihu.com/p/27823933

<!--存放頁面內容的dom節點-->
<div class="weui-cell__bd weui-uploader__bd">
    <ul class="weui-uploader__files" id="uploaderFiles">                
    <!--圖片存放區域--> 
    </ul>
    <!--上傳按鈕-->
    <div class="weui-uploader__input-box">
        <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple />
    </div>
</div>

// 圖片數組  如下爲具體的功能實現js

     var imgarr=[];

     // 點擊添加圖片

     $("#uploaderInput").on("change",function () {
     //獲取所選圖片的列表對象
        var fileimg=this.files; 
     //查看已經選擇的圖片數量
        var arrnum=imgarr.length;
     //獲取全部圖片的數量
        var num=arrnum+fileimg.length;
    //咱們這裏是限制了三張
        if(num>3){
   //該處借用了layerjs的彈出層模塊
            layer.msg("最多上傳三張圖片");

            return false;

        }
    //循環取出本次選擇的圖片
        for(var i =0;i<fileimg.length;i++){    

            /*圖片轉Base64 核心代碼*/  
   
            var file = fileimg[i];  

            //這裏咱們判斷下類型若是不是圖片就返回中斷上傳，也能夠continue直接過濾掉該文件

            if (!/image\/\w+/.test(file.type)) {  

                layer.msg("請確保文件爲圖像類型");  

                return false;  

            }  
            //建立一個文件讀取的工具類
            var reader = new FileReader(); 
            //這裏利用了閉包的特性，來保留文件名
            (function(x){
                    reader.onload = function (e) {
                    //將讀取到圖片流直接拼接起來
                    var str='<li class="weui-uploader__file " style="background-image:url('+this.result+')"><span class="remove" style="color:red">X</span></li>';
                    //塞到頁面節點裏                    
                    $("#uploaderFiles").append(str);
                    //調用壓縮文件的方法，具體實現邏輯見下面
                    render(this.result,x);
                    }  

            })(file.name) 
           //告訴文件讀取工具類讀取那個文件
            reader.readAsDataURL(file);  

        }

     })
//設置壓縮圖片的最大高度
     var MAX_HEIGHT = 1000;
function render(src,picname) {
    // 建立一個 Image 對象
    var image = new Image();
    // 綁定 load 事件處理器，加載完成後執行
    image.onload = function() {
        // 獲取 canvas DOM 對象
        var canvas = document.createElement("canvas");
        // 若是高度超標
        if (image.height > MAX_HEIGHT && image.height >= image.width) {
            // 寬度等比例縮放 *=
            image.width *= MAX_HEIGHT / image.height;
            image.height = MAX_HEIGHT;
        }
       //考錄到用戶上傳的有多是橫屏圖片一樣過濾下寬度的圖片。
        if (image.width > MAX_HEIGHT && image.width > image.height) {
            // 寬度等比例縮放 *=
            image.height *= MAX_HEIGHT / image.width;
            image.width = MAX_HEIGHT;
        }

        // 獲取 canvas的 2d 畫布對象,
        var ctx = canvas.getContext("2d");
        // canvas清屏，並設置爲上面寬高
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // 重置canvas寬高
        canvas.width = image.width;
        canvas.height = image.height;
        // 將圖像繪製到canvas上
        ctx.drawImage(image, 0, 0, image.width, image.height);
        // !!! 注意，image 沒有加入到 dom之中
//        document.getElementById('img').src = canvas.toDataURL("image/png");
        var blob = canvas.toDataURL("image/jpeg");
//將轉換結果放在要上傳的圖片數組裏
        imgarr.push({"pic":blob,"pic_name":picname});
    };
    image.src = src;
};
//到這裏咱們圖片壓縮的代碼就結束了。咱們再加上，一個事件控制把須要上傳的圖片數組傳給後臺就行啦。


$.ajax({
   "url":"",
   "type":"post"
   "dataType":"json",
   "data":{"pic":imgarr},
   "success":function(res){}
});