js壓縮圖片到2m如下

用的canvas。這個問題測試妹子反饋了好幾回bug，解決了好屢次，雖然用了比較僵硬的辦法，但總算最終解決了。

由於php的同事說，頁面上的圖片要直接調用七牛的接口上傳到七牛，因此後端那邊不能處理，必須前端這邊把圖片處理到2m如下。但是我感受用以前的辦法只是把寬高變小，並不能保證壓縮後必定就小於2m。因此沒辦法吧，仍是得搞。

/**
 * 將圖片轉化爲base64
 */
function imgBase64(file) {
    var self = this;
    // 看支持不支持FileReader
    if (!file || !window.FileReader) return;
    // 建立一個 Image 對象
    var image = new Image();
    // 綁定 load 事件處理器，加載完成後執行
    image.onload = function(){
        // 獲取 canvas DOM 對象
        var canvas = document.createElement('canvas')
        // 返回一個用於在畫布上繪圖的環境, '2d' 指定了您想要在畫布上繪製的類型
        var ctx = canvas.getContext('2d')
        // 若是高度超標 // 參數，最大高度
        var MAX_HEIGHT = 9000;
        if(image.height > MAX_HEIGHT) {
            // 寬度等比例縮放 *=
            image.width *= MAX_HEIGHT / image.height;
            image.height = MAX_HEIGHT;
        }
        // 獲取 canvas的 2d 環境對象,
        // 能夠理解Context是管理員，canvas是房子
        // canvas清屏
        console.log('canvas.width:', canvas.width);
        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之中
        console.log(file.type);
        // console.log(canvas.toDataURL('image/jpeg',0.5));
        //----------//
        var maxSize = 2*1024; // 2M
        var fileSize = file.size/1024; // 圖片大小
        if(fileSize > maxSize) { // 若是圖片大小大於2m，進行壓縮
            console.log(maxSize,fileSize, maxSize/fileSize );
            uploadSrc = canvas.toDataURL(file.type, maxSize/fileSize);
            document.getElementById('previewImage').src = uploadSrc;
            uploadFile = convertBase64UrlToFile(uploadSrc, file.name.split('.')[0]); // 轉成file文件
        } else {
            uploadSrc = canvas.toDataURL(file.type, 0.5);
            document.getElementById('previewImage').src = uploadSrc;
            uploadFile = file;
        }
        //--------//
    };
    if (/^image/.test(file.type)) {
        // 建立一個reader
        var reader = new FileReader();
        // 將圖片將轉成 base64 格式
        reader.readAsDataURL(file);
        // 讀取成功後的回調
        reader.onload = function () {
            // 設置src屬性，瀏覽器會自動加載。
            // 記住必須先綁定事件，才能設置src屬性，不然會出同步問題。
            image.src = this.result;
        }
    }
}

這段代碼是找的以前別人寫過的代碼，而後本身加了點東西湊合用的。
以前沒怎麼弄過壓縮圖片，直覺以爲不能把寬高壓縮的過小，怕把圖片給壓縮模糊了，因而傻逼的把最大高度設置了9000。

var MAX_HEIGHT = 9000;

壓縮的圖片質量也設置了一個奇奇怪怪的值。

uploadSrc = canvas.toDataURL(file.type, maxSize/fileSize);

測試了一波上線了，結果果真出問題了。測試同窗反饋用戶的問題：壓縮後會大於2m！因而腦子進水的改了一波。

var maxSize = 1.5*1024; // 1.5M

結果又測出了問題：小於2m的圖片壓縮後會出現大於2m的狀況！才突然想到一個問題，大於1.5m的圖片轉base64以後是可能大於2m的，本身就是瞎改。

因而又想着把最大高度改了，試試。順便把圖片質量下降。

var MAX_HEIGHT = 4000;
...
uploadSrc = canvas.toDataURL(file.type, 0.3); // 把0.5改爲了0.3

結果測試妹子測完後心虛的問，徹底沒問題了麼？內心也比較虛的不得了，乾脆加了一個判斷，壓縮後仍是大於2m的話，就提示從新上傳圖片。當時都上線了，結果過了幾天測試妹子一琢磨，這麼提示仍是不友好，不合理，又開始敦促優化。

給改了方案，壓縮以後若是大於2m，就再進行壓縮，心想着這應該萬無一失了，果真好久測試和用戶都沒再反映，至少經過了一段比較長時間的實踐檢驗。
其實把最大高度還改小了一點，改爲了3000，但感受也並什麼用。

/**
 * 校驗圖片轉換後大小並上傳
*/
function checkAndHandleUpload(file) {
    imgBase64(file, function (image, canvas) {
        var maxSize = 2*1024; // 2M
        var fileSize = file.size/1024; // 圖片大小

        if(fileSize > maxSize) { // 若是圖片大小大於2m，進行壓縮
            console.log(maxSize,fileSize, maxSize/fileSize );
            uploadSrc = canvas.toDataURL(file.type, maxSize/fileSize);
            uploadFile = convertBase64UrlToFile(uploadSrc, file.name.split('.')[0]); // 轉成file文件
        } else {
            uploadSrc = image.src; //canvas.toDataURL(file.type,0.5);
            uploadFile = file;
        }

        var compressedSize = uploadFile.size / 1024 / 1024;
        if(compressedSize.toFixed(2) > 2.00) {
            checkAndHandleUpload(uploadFile);
        } else {
            document.getElementById('previewImage').src = uploadSrc;
        }
    });
}

/**
 * 將圖片轉化爲base64
 */
function imgBase64(file, callback) {
    var self = this;
    // 看支持不支持FileReader
    if (!file || !window.FileReader) return;
    // 建立一個 Image 對象
    var image = new Image();
    // 綁定 load 事件處理器，加載完成後執行
    image.onload = function(){
        // 獲取 canvas DOM 對象
        var canvas = document.createElement('canvas')
        // 返回一個用於在畫布上繪圖的環境, '2d' 指定了您想要在畫布上繪製的類型
        var ctx = canvas.getContext('2d')
        // 若是高度超標 // 參數，最大高度
        var MAX_HEIGHT = 3000;
        if(image.height > MAX_HEIGHT) {
            // 寬度等比例縮放 *=
            image.width *= MAX_HEIGHT / image.height;
            image.height = MAX_HEIGHT;
        }
        // 獲取 canvas的 2d 環境對象,
        // 能夠理解Context是管理員，canvas是房子
        // canvas清屏
        console.log('canvas.width:', canvas.width);
        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之中
        console.log(file.type);
        // console.log(canvas.toDataURL('image/jpeg',0.5));
        //----------//
        callback(image, canvas);
        //--------//
    };
    if (/^image/.test(file.type)) {
        // 建立一個reader
        var reader = new FileReader();
        // 將圖片將轉成 base64 格式
        reader.readAsDataURL(file);
        // 讀取成功後的回調
        reader.onload = function () {
            // self.imgUrls.push(this.result);
            // 設置src屬性，瀏覽器會自動加載。
            // 記住必須先綁定事件，才能設置src屬性，不然會出同步問題。
            image.src = this.result;
        }
    }
}