js 壓縮圖片（只縮小體積，不更改圖片尺寸）

 

1.情景展現

　　如上圖所示，點擊上傳圖片按鈕，調用手機攝像頭拍照功能。 

　　<input onchange="javascript:imgFun.uploadPicture();" type="file" name="file" id="file" accept="image/*" capture="camera" style="display: none;">

　　咱們知道如今，手機拍照在10MB左右，體積太大，在上傳到服務器前，能不能只縮小圖片的體積，而不改變圖片尺寸？

2.緣由分析

　　經過canvas實現對圖片的從新繪製。 

　　代碼展現：

/**
 * 圖片壓縮
 * @explain 藉助canvas對圖片進行重繪（canvas2DataURL）
 * @param base64Url	base64格式的圖片字符串
 * @param imgAttr	重繪圖片寬度、高度、質量等屬性的設置
 * @param callback	該函數執行完畢後，要執行的回調函數
 * @returns
 */
function photoCompress (base64Url, imgAttr, callback){
    var img = new Image();
    img.src = base64Url;
    img.onload = function(){
        var that = this;
        // 默認按比例壓縮
        var w = that.width,
            h = that.height,
            // 寬高比例
            scale = w / h;
        w = imgAttr.width || w;
        h = imgAttr.height || (w / scale);
        // 默認圖片質量爲0.7
        var quality = 0.7;
        //生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        // 建立屬性節點
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        canvas.setAttributeNode(anw);
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anh);
        ctx.drawImage(that, 0, 0, w, h);
        // 圖像質量（0-1）
        if(imgAttr.quality && imgAttr.quality <= 1 && imgAttr.quality > 0){
            quality = imgAttr.quality;
        }
        // 重繪後的圖片類型
        var imgType = imgAttr.type || 'image/jpeg';
        // quality值越小，所繪製出的圖像越模糊
        var base64 = canvas.toDataURL(imgType, quality);
        // 回調函數返回base64的值
        callback(base64);
    };
}　　　　

　　可自定義設置圖片質量，圖片的寬高（經過imgAttr設置）。　　

3.完整示例

// js 獲取文件對象
var fileObj = document.getElementById("file").files[0];
if (null == fileObj) {
    alert("圖像上傳失敗，請重試！");
}
// 文件讀取對象
var reader = new FileReader();
// 圖片轉base64（Blob對象或File對象）
reader.readAsDataURL(fileObj);
// 圖片大小<=1MB，size的單位：B（1Mb=1B*1024*1024）
if(fileObj.size/1024 <= 1024) {
    reader.onload = function(e) {
        // 獲取對應的base64
        var imgBase64 = e.target.result;
        // 將圖片的base64碼傳給後臺
        // 調用騰訊接口
        $.post(baseUrl + "/weixin/facein/upImg2.do",{imgBase64:imgBase64},function(resData){
            // TODO 對返回的接口數據進行自動填充處理
        });
    };
} else {
    // 讀取完畢
    reader.onload = function(){
        // 圖片轉換成爲base64Url
        var fileBase64 = this.result;
        // 圖片參數
        var imgAttr = {quality : 0.2, type : 'img/jpeg'};
        // 回調函數
        var callBack = function (base64Codes) {
            // 圖片比較
            // 調用騰訊接口
            
        };
        // 壓縮圖片
        photoCompress(fileBase64,imgAttr,callBack);
    };
}

　　說明：

　　前端對圖片進行重繪，對瀏覽器有必定的要求，我測試的時候在電腦端沒有問題，可是，在微信上使用時，就會很難受了，會將微信的qq瀏覽器內核搞垮，根本沒法使用。

　　不得以，放棄了在前端進行壓縮的想法，轉而直接將圖片以流的形式提交至後臺，由java負責圖片壓縮處理。

　　補充：

　　圖片優化方面能夠考慮從如下幾個方面着手：減少分辨率 >壓縮圖片>chrome使用webp格式

寫在最後

　　哪位大佬如若發現文章存在紕漏之處或須要補充更多內容，歡迎留言！！！

 相關推薦：

• 我的主頁
• java 壓縮圖片（只縮小體積，不更改圖片尺寸）