js base64轉file和壓縮base64

 // 將base64轉blob
    dataURLtoBlob(dataurl: any) {
        var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
    },
    //將blob轉換為file
    blobToFile(theBlob: any, fileName: any) {
        theBlob.lastModifiedDate = new Date();
        theBlob.name = fileName;
        return theBlob;
    },
/**
     * 壓縮圖片到指定大小
     */
    compressImage(base64: any, w: any, format: any = 'image/png', callback: any) {
        var newImage = new Image();
        var quality = 0.6;    //壓縮系數(shù)0-1之間
        newImage.src = base64;
        newImage.setAttribute("crossOrigin", 'Anonymous');  //url為外域時需要
        var imgWidth, imgHeight;
        newImage.onload = function () {
            imgWidth = 160;
            imgHeight = 90;
            var canvas = document.createElement("canvas");
            let ctx:any = canvas.getContext("2d");
            if (Math.max(imgWidth, imgHeight) > w) {
                if (imgWidth > imgHeight) {
                    canvas.width = w;
                    canvas.height = w * imgHeight / imgWidth;
                } else {
                    canvas.height = w;
                    canvas.width = w * imgWidth / imgHeight;
                }
            } else {
                canvas.width = imgWidth;
                canvas.height = imgHeight;
                quality = 0.6;
            }
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
            var base64 = canvas.toDataURL(format, quality); //壓縮語句
            // 如想確保圖片壓縮到自己想要的尺寸,如要求在50-150kb之間,請加以下語句,quality初始值根據(jù)情況自定
            while (base64.length / 1024 > 150) {
                quality -= 0.01;
                base64 = canvas.toDataURL(format, quality);
            }
            // 防止最后一次壓縮低于最低尺寸辑畦,只要quality遞減合理匣砖,無需考慮
            // while (base64.length / 1024 < 50) {
            //  quality += 0.001;
            //  base64 = canvas.toDataURL("image/jpeg", quality);
            // }
            callback(base64);//必須通過回調函數(shù)返回,否則無法及時拿到該值煞烫,return拿不到
        }
    }

調用
1浑此、base64Data:傳獲取到的base64字符串
2、newBase64Data:返回壓縮后的base64
3滞详、image/png:是base64開頭的那一節(jié)

console.log('base64Data', base64Data.length); // 原長度
compressImage(base64Data, 150, 'image/png', (newBase64Data: any) => {
        console.log('newBase64Data', newBase64Data.length); // 壓縮后的長度
        const blob = dataURLtoBlob(newBase64Data);
         const file = blobToFile(blob, 'image.png');
         const formData = new FormData();
         formData.append("file", file);
         console.log('formData', formData);
});
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末凛俱,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子料饥,更是在濱河造成了極大的恐慌蒲犬,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,273評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件岸啡,死亡現(xiàn)場離奇詭異原叮,居然都是意外死亡,警方通過查閱死者的電腦和手機巡蘸,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,349評論 3 398
  • 文/潘曉璐 我一進店門奋隶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人悦荒,你說我怎么就攤上這事唯欣。” “怎么了搬味?”我有些...
    開封第一講書人閱讀 167,709評論 0 360
  • 文/不壞的土叔 我叫張陵境氢,是天一觀的道長。 經(jīng)常有香客問我碰纬,道長产还,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,520評論 1 296
  • 正文 為了忘掉前任嘀趟,我火速辦了婚禮脐区,結果婚禮上,老公的妹妹穿的比我還像新娘她按。我一直安慰自己牛隅,他們只是感情好炕柔,可當我...
    茶點故事閱讀 68,515評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著媒佣,像睡著了一般匕累。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上默伍,一...
    開封第一講書人閱讀 52,158評論 1 308
  • 那天欢嘿,我揣著相機與錄音,去河邊找鬼也糊。 笑死炼蹦,一個胖子當著我的面吹牛,可吹牛的內容都是我干的狸剃。 我是一名探鬼主播掐隐,決...
    沈念sama閱讀 40,755評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼钞馁!你這毒婦竟也來了虑省?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,660評論 0 276
  • 序言:老撾萬榮一對情侶失蹤僧凰,失蹤者是張志新(化名)和其女友劉穎探颈,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體训措,經(jīng)...
    沈念sama閱讀 46,203評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡膝擂,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,287評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了隙弛。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片架馋。...
    茶點故事閱讀 40,427評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖全闷,靈堂內的尸體忽然破棺而出叉寂,到底是詐尸還是另有隱情,我是刑警寧澤总珠,帶...
    沈念sama閱讀 36,122評論 5 349
  • 正文 年R本政府宣布屏鳍,位于F島的核電站,受9級特大地震影響局服,放射性物質發(fā)生泄漏钓瞭。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,801評論 3 333
  • 文/蒙蒙 一淫奔、第九天 我趴在偏房一處隱蔽的房頂上張望山涡。 院中可真熱鬧,春花似錦、人聲如沸鸭丛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,272評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽鳞溉。三九已至瘾带,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間熟菲,已是汗流浹背看政。 一陣腳步聲響...
    開封第一講書人閱讀 33,393評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留抄罕,地道東北人允蚣。 一個月前我還...
    沈念sama閱讀 48,808評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像贞绵,于是被迫代替她去往敵國和親厉萝。 傳聞我的和親對象是個殘疾皇子恍飘,可洞房花燭夜當晚...
    茶點故事閱讀 45,440評論 2 359

推薦閱讀更多精彩內容