js上傳圖片大小壓縮

/*
    file：文件(類型是圖片格式)，
    obj：文件壓縮後對象width， height， quality(0-1)
    callback：容器或者回調函數
*/
let photoCompress = function (file) {
    return new Promise((resolve, reject) => {
        try {
            let that = this;
            let ready = new FileReader();
            /*開始讀取指定File對象中的內容. 讀取操作完成時,返回一個URL格式的字符串.*/
            ready.readAsDataURL(file);
            ready.onload = function () {
                let re = this.result;
                //開始壓縮
                canvasDataURL(re, (base64) => {
                    let minFile = base64UrlToFile(base64, file.name)
                    resolve(minFile)
                })
            }
        } catch (error) {
            reject(error)
        }
    })
}

/*利用canvas數據化圖片進行壓縮*/
/*圖片轉base64*/
let canvasDataURL = function (path, callback) {
    let obj = {}

    let img = new Image();
    img.src = path;
    img.onload = function () {
        let that = this;   //指到img
        // 默認按比例壓縮
        let w = that.width,
            h = that.height,
            scale = w / h;
        w = obj.width || w;
        h = obj.height || (w / scale);
        let quality = 0.4;  // 默認圖片質量爲0.4
        //生成canvas
        let canvas = document.createElement('canvas');
        let ctx = canvas.getContext('2d');
        // 創建屬性節點
        let anw = document.createAttribute("width");
        anw.nodeValue = w;
        let anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(that, 0, 0, w, h);
        // 圖像質量
        if (obj.quality && obj.quality === 1 && obj.quality === 0) {
            quality = obj.quality;
        }
        // quality值越小，所繪製出的圖像越模糊
        let base64 = canvas.toDataURL('image/jpeg', quality);
        // 回調函數返回base64的值
        callback(base64);
    }
}

/*這裏轉file*/
let base64UrlToFile = function (urlData, filename) {
    let arr = urlData.split(','),
        mime = arr[0].match(/:(.*?);/)[1],  // 去掉url的頭，並轉化爲byte
        bstr = atob(arr[1]),    // 處理異常,將ascii碼小於0的轉換爲大於0
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    // return new Blob([u8arr], { type: mime });
    //轉file
    return new File([u8arr], filename, { type: mime });
}

export default photoCompress