JS圖片壓縮預覽/下載

前言

好像沒啥好說的~

大概做法

• 先由filereader獲取圖片的base64，控制圖片生成，但不顯示。
• 然後將圖片按比例設置好壓縮後的寬高繪製在canvas畫布上。
• 之後利用canvas的自帶方法再次轉換成base64，再對base64進行解碼存儲到數組緩存區，生成blob，然後創建下載鏈接就完了。

上代碼，看註釋就完了

//html
<input type="file" id="file"> //這裏選擇圖片
<canvas id="canvas"></canvas> //canvas畫布

//js
document.getElementById('file').onchange = function () {
        console.log(this.files[0]);
        //注意這個files是數組
        reader.readAsDataURL(this.files[0]);
        var reader = new FileReader();
        reader.onload = function (e) {
            //下面這三行就可以實現文件選擇了圖片以後，預覽的功能，但是有些圖片可能太大了影響頁面觀感，得統一縮小下。
            //var img = new Image();  
            // img.src = e.target.result;  
            // document.body.appendChild(img);
            render(e.target.result) //這個方法實現圖片的壓縮下載
        }  

}

    var MAX_H = 100;
    function render(src){  
        // 創建一個 Image 對象  
        var image = new Image();  
        // 設置src屬性，加載圖片內容，此時還未壓縮
        image.src = src;  
        // 綁定 load 事件處理器，加載完成後執行  
        image.onload = function(){  
            // 獲取 canvas DOM 對象  
            var canvas = document.getElementById("canvas");  
            // 如果高度超標  
            if(image.height > MAX_H) {  
                // 寬度等比例縮放 *=  
                image.width *= MAX_H / image.height;  
                image.height = MAX_H;  
            }  
            // 獲取 canvas的 2d 環境對象, 有些上古瀏覽器不支持canvas
            var ctx = canvas.getContext("2d");  
            // canvas清屏  
            ctx.clearRect(0, 0, canvas.width, canvas.height);  
            // 把canvas寬高設置爲圖片寬高  
            canvas.width = image.width;  
            canvas.height = image.height;  
            // 將圖像繪製到canvas上 
            //drawImage(img,startX,startY,endX,endY)
            ctx.drawImage(image, 0, 0, image.width, image.height);  
            //將繪製好的canvas圖像轉爲DataURL
            //toDataURL(圖片類型,圖片質量)，這個圖片質量越高就越清晰（相同寬高）
            //canvas.toDataURL 返回的默認格式就是 image/png
            var data = canvas.toDataURL('image/jpeg',0.5);
           //獲取圖片的dataUrl轉成blob
           //這下面轉blob的代碼我也沒搞懂，無百度了DataURL轉blob就是這些代碼了
            data = data.split(',')[1];
            data = window.atob(data);
            var ia = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
                ia[i] = data.charCodeAt(i);
            };
            var blob = new Blob([ia], {
                type: "image/jpeg"
            });
            
            //生成blob文件的下載鏈接，把鏈接附在a便籤上，把a便籤加入dom中，點擊就可以下載啦
            
            var url3 = URL.createObjectURL(blob);
            var a = document.createElement('a');
            a.href = url3;
            a.text = '測試圖片';
            a.download = 'mytest.jpg';
            document.body.appendChild(a);
        };  
    };  

效果預覽

後語

壓縮後上傳的操作，這裏就不寫了，百度下blob如何生成file上傳即可。