国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

js壓縮圖片到2m以下

荊兆峰 / 3037人閱讀

摘要:因為的同事說,頁面上的圖片要直接調(diào)用七牛的接口上傳到七牛,所以后端那邊不能處理,必須前端這邊把圖片處理到以下。壓縮的圖片質(zhì)量也設(shè)置了一個奇奇怪怪的值。

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

因為php的同事說,頁面上的圖片要直接調(diào)用七牛的接口上傳到七牛,所以后端那邊不能處理,必須前端這邊把圖片處理到2m以下。可是我感覺用之前的辦法只是把寬高變小,并不能保證壓縮后一定就小于2m。所以沒辦法吧,還是得搞。

/**
 * 將圖片轉(zhuǎn)化為base64
 */
function imgBase64(file) {
    var self = this;
    // 看支持不支持FileReader
    if (!file || !window.FileReader) return;
    // 創(chuàng)建一個 Image 對象
    var image = new Image();
    // 綁定 load 事件處理器,加載完成后執(zhí)行
    image.onload = function(){
        // 獲取 canvas DOM 對象
        var canvas = document.createElement("canvas")
        // 返回一個用于在畫布上繪圖的環(huán)境, "2d" 指定了您想要在畫布上繪制的類型
        var ctx = canvas.getContext("2d")
        // 如果高度超標 // 參數(shù),最大高度
        var MAX_HEIGHT = 9000;
        if(image.height > MAX_HEIGHT) {
            // 寬度等比例縮放 *=
            image.width *= MAX_HEIGHT / image.height;
            image.height = MAX_HEIGHT;
        }
        // 獲取 canvas的 2d 環(huán)境對象,
        // 可以理解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]); // 轉(zhuǎn)成file文件
        } else {
            uploadSrc = canvas.toDataURL(file.type, 0.5);
            document.getElementById("previewImage").src = uploadSrc;
            uploadFile = file;
        }
        //--------//
    };
    if (/^image/.test(file.type)) {
        // 創(chuàng)建一個reader
        var reader = new FileReader();
        // 將圖片將轉(zhuǎn)成 base64 格式
        reader.readAsDataURL(file);
        // 讀取成功后的回調(diào)
        reader.onload = function () {
            // 設(shè)置src屬性,瀏覽器會自動加載。
            // 記住必須先綁定事件,才能設(shè)置src屬性,否則會出同步問題。
            image.src = this.result;
        }
    }
}

這段代碼是找的之前別人寫過的代碼,然后自己加了點東西湊合用的。
之前沒怎么弄過壓縮圖片,直覺覺得不能把寬高壓縮的太小,怕把圖片給壓縮模糊了,于是傻逼的把最大高度設(shè)置了9000。

var MAX_HEIGHT = 9000;

壓縮的圖片質(zhì)量也設(shè)置了一個奇奇怪怪的值。

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

測試了一波上線了,結(jié)果果然出問題了。測試同學(xué)反饋用戶的問題:壓縮后會大于2m!于是腦子進水的改了一波。

var maxSize = 1.5*1024; // 1.5M

結(jié)果又測出了問題:小于2m的圖片壓縮后會出現(xiàn)大于2m的情況!才忽然想到一個問題,大于1.5m的圖片轉(zhuǎn)base64之后是可能大于2m的,自己就是瞎改。

于是又想著把最大高度改了,試試。順便把圖片質(zhì)量降低。

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

結(jié)果測試妹子測完后心虛的問,完全沒問題了么?心里也比較虛的不得了,干脆加了一個判斷,壓縮后還是大于2m的話,就提示重新上傳圖片。當時都上線了,結(jié)果過了幾天測試妹子一琢磨,這么提示還是不友好,不合理,又開始敦促優(yōu)化。

給改了方案,壓縮之后如果大于2m,就再進行壓縮,心想著這應(yīng)該萬無一失了,果然很久測試和用戶都沒再反映,至少通過了一段比較長時間的實踐檢驗。
其實把最大高度還改小了一點,改成了3000,但感覺也并什么用。

/**
 * 校驗圖片轉(zhuǎn)換后大小并上傳
*/
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]); // 轉(zhuǎn)成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;
        }
    });
}

/**
 * 將圖片轉(zhuǎn)化為base64
 */
function imgBase64(file, callback) {
    var self = this;
    // 看支持不支持FileReader
    if (!file || !window.FileReader) return;
    // 創(chuàng)建一個 Image 對象
    var image = new Image();
    // 綁定 load 事件處理器,加載完成后執(zhí)行
    image.onload = function(){
        // 獲取 canvas DOM 對象
        var canvas = document.createElement("canvas")
        // 返回一個用于在畫布上繪圖的環(huán)境, "2d" 指定了您想要在畫布上繪制的類型
        var ctx = canvas.getContext("2d")
        // 如果高度超標 // 參數(shù),最大高度
        var MAX_HEIGHT = 3000;
        if(image.height > MAX_HEIGHT) {
            // 寬度等比例縮放 *=
            image.width *= MAX_HEIGHT / image.height;
            image.height = MAX_HEIGHT;
        }
        // 獲取 canvas的 2d 環(huán)境對象,
        // 可以理解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)) {
        // 創(chuàng)建一個reader
        var reader = new FileReader();
        // 將圖片將轉(zhuǎn)成 base64 格式
        reader.readAsDataURL(file);
        // 讀取成功后的回調(diào)
        reader.onload = function () {
            // self.imgUrls.push(this.result);
            // 設(shè)置src屬性,瀏覽器會自動加載。
            // 記住必須先綁定事件,才能設(shè)置src屬性,否則會出同步問題。
            image.src = this.result;
        }
    }
}

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/88882.html

相關(guān)文章

  • Vue使用mixins手寫壓縮圖片代碼

    摘要:一介紹本文將介紹再項目中通過對圖片進行壓縮后使用。把圖片能轉(zhuǎn)換成出發(fā)事件對賦值完成,觸發(fā)事件生成,調(diào)用回調(diào)函數(shù)。將圖片將轉(zhuǎn)成格式把轉(zhuǎn)換成文件四壓縮完成使用五參考鏈接壓縮圖片到以下 一、介紹 本文將介紹再Vue項目中通過js對圖片進行壓縮后使用。(純前端實現(xiàn),不依賴后臺) 主要使用Canvas.toDataURL(type, encoderOptions)對圖片大小進行調(diào)整 參數(shù) 描...

    CoXie 評論0 收藏0
  • 在瀏覽器端用H5實現(xiàn)圖片壓縮上傳

    摘要:一需求的場景在我們的需求中需要有一個在手機瀏覽器端,用戶實現(xiàn)上傳證件照片的功能,我們第一版上了一個最簡版,直接讓用戶在本地選擇圖片,然后上傳到公司公共的服務(wù)器上。 一、需求的場景: 在我們的需求中需要有一個在手機瀏覽器端,用戶實現(xiàn)上傳證件照片的功能,我們第一版上了一個最簡版,直接讓用戶在本地選擇圖片,然后上傳到公司公共的服務(wù)器上。 功能實現(xiàn)后我們發(fā)現(xiàn)一個問題,公司公共的服務(wù)器有2M...

    snowLu 評論0 收藏0
  • 在瀏覽器端用H5實現(xiàn)圖片壓縮上傳

    摘要:一需求的場景在我們的需求中需要有一個在手機瀏覽器端,用戶實現(xiàn)上傳證件照片的功能,我們第一版上了一個最簡版,直接讓用戶在本地選擇圖片,然后上傳到公司公共的服務(wù)器上。 一、需求的場景: 在我們的需求中需要有一個在手機瀏覽器端,用戶實現(xiàn)上傳證件照片的功能,我們第一版上了一個最簡版,直接讓用戶在本地選擇圖片,然后上傳到公司公共的服務(wù)器上。 功能實現(xiàn)后我們發(fā)現(xiàn)一個問題,公司公共的服務(wù)器有2M...

    Flink_China 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<