前端圖片壓縮Canvas

?????圖片壓縮Canvas

#關于如何實現(xiàn)壓縮

查閱MDN找到的是這個API:

HTMLCanvasElement.toBlob()?方法創(chuàng)造Blob對象论衍,用以展示canvas上的圖片;這個圖片文件可以被緩存或保存到本地,由用戶代理端自行決定定拟。如不特別指明,圖片的類型默認為?image/png蒋畜,分辨率為96dpi蹦魔。

// callback處理blob主要,type圖片類型铁追,encoderOptions圖片壓縮比例 0-1

canvas.toBlob(callback, type, encoderOptions);

Demo


這里看到壓縮效果已經(jīng)由原來的8.5Mb到了1.6Mb左右,這里有個問題Mac上面的壓縮效果沒Win好(尷尬了)季蚂。


#實現(xiàn)代碼


<!DOCTYPE html>

<html lang="en">

<head>

? ? <meta charset="UTF-8">

? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">

? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">

? ? <title>Document</title>

? ? <style>

? ? ? ? body{

? ? ? ? ? ? padding: 20px 0;

? ? ? ? }

? ? ? ? #fileSelect{

? ? ? ? ? ? margin-top: 10px;

? ? ? ? ? ? padding: 10px 5px;

? ? ? ? ? ? border: 1px solid chartreuse;

? ? ? ? ? ? border-radius: 5px;

? ? ? ? ? ? background: green;

? ? ? ? ? ? color: white;

? ? ? ? ? ? text-decoration: none;

? ? ? ? }

? ? ? ? #fileSelect:hover{

? ? ? ? ? ? opacity: 0.8;

? ? ? ? }

? ? </style>

</head>

<body>

? ? <input type="file" id="fileElem" multiple accept="image/*" style="display:none"

? ? ? ? onchange="handleFiles(event,this.files)">

? ? <a href="#" id="fileSelect">點擊上傳</a>

</body>

<script>

? ? window.onload = function () {

? ? ? ? var fileSelect = document.getElementById("fileSelect"),

? ? ? ? ? ? fileElem = document.getElementById("fileElem");

? ? ? ? fileSelect.addEventListener("click", function (e) {

? ? ? ? ? ? if (fileElem) {

? ? ? ? ? ? ? ? fileElem.click(); // input文件上傳

? ? ? ? ? ? }

? ? ? ? ? ? e.preventDefault();

? ? ? ? }, false);

? ? }

? ? function handleFiles(e, files) {

? ? ? ? for (var i = 0; i < files.length; i++) {

? ? ? ? ? ? var file = files[i];

? ? ? ? ? ? var imageType = /^image\//;

? ? ? ? ? ? if (!imageType.test(file.type)) {

? ? ? ? ? ? ? ? continue;

? ? ? ? ? ? }

? ? ? ? ? ? console.log(file);

? ? ? ? ? ? const width = 500;

? ? ? ? ? ? const height = 300;

? ? ? ? ? ? const fileName = file.name;

? ? ? ? ? ? const reader = new FileReader();

? ? ? ? ? ? reader.readAsDataURL(file);

? ? ? ? ? ? reader.onload = event => {

? ? ? ? ? ? ? ? const img = new Image();

? ? ? ? ? ? ? ? img.src = reader.result;

? ? ? ? ? ? ? ? img.onload = () => {

? ? ? ? ? ? ? ? ? ? const elem = document.createElement('canvas');

? ? ? ? ? ? ? ? ? ? elem.width = width;

? ? ? ? ? ? ? ? ? ? elem.height = height;

? ? ? ? ? ? ? ? ? ? const ctx = elem.getContext('2d');

? ? ? ? ? ? ? ? ? ? // canvas大小設置

? ? ? ? ? ? ? ? ? ? ctx.drawImage(img, 0, 0, width, height);

? ? ? ? ? ? ? ? ? ? // 植入內容

? ? ? ? ? ? ? ? ? ? document.body.append(elem);

? ? ? ? ? ? ? ? ? ? //--------- 如果不需要資源上傳,只需顯示琅束,下面代碼可以不要了------

? ? ? ? ? ? ? ? ? ? ctx.canvas.toBlob((blob) => {

? ? ? ? ? ? ? ? ? ? ? ? const file = new File([blob], fileName, {

? ? ? ? ? ? ? ? ? ? ? ? ? ? type: 'image/jpeg',

? ? ? ? ? ? ? ? ? ? ? ? ? ? lastModified: Date.now()

? ? ? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? ? ? ? ? console.log(file); // file為壓縮后的圖片

? ? ? ? ? ? ? ? ? ? }, 'image/jpeg', 10e-9);

? ? ? ? ? ? ? ? ? ? // ----------------------


? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? reader.onerror = error => console.log(error);

? ? ? ? ? ? };

? ? ? ? }

? ? }

</script>

</html>


#流程

1.new FileReader()

首先需要的是利用這個API來讀取文件扭屁,實例化之后采用 readAsDataURL 的方式來讀取圖片的資源路徑,這里的兼容性不錯,囊闊了幾乎所有瀏覽器版本和平臺涩禀。


reader.readAsDataURL(file); //這樣讀取圖片料滥,上述例子可以多選操作,所以循環(huán)了下


2.reader.onload的回調中創(chuàng)建圖片

// 創(chuàng)建圖片內容constimg =newImage();// 將圖片地址綁定到base64,這里遇到一個問題采用event.target.result取不到當前艾船,reader下面有result屬性可用img.src = reader.result;


3.創(chuàng)建畫布葵腹,繪制圖片內容

// 創(chuàng)建canvas畫布

const elem = document.createElement('canvas');

// 設置畫布大小

elem.width = width;

elem.height = height;

//獲取???

const ctx = elem.getContext('2d')

// 繪制

ctx.drawImage(img, 0, 0, width, height); // drawImage這里查看MDN文檔即可

// 植入頁面

document.body.append(elem);


4.劃重點壓縮,將canvas壓縮大小轉為image對象

ctx.canvas.toBlob((blob) => {

? ? const file = new File([blob], fileName, {

? ? ? ? type: 'image/jpeg', // 這里的格式可以是jpg屿岂,png践宴,gif,png等爷怀,都試了下阻肩,壓縮大小不變

? ? ? ? lastModified: Date.now()

? ? });

? ? console.log(file);

}, 'image/jpeg', 10e-9); // 這里的10e-9很小了 極限0-1 0是最大壓縮比率, 1這里有點玄學變大了 超過1 或者小于0 大小大概壓縮了6成左右




#補充

這里看到一個兼容性的問題,主要考慮的Sarari IOS上运授,誰叫客戶用呢烤惊?


// MDN給除了兼容代碼乔煞,大體是是在Object原型添加了toBlob函數(shù)實現(xiàn),粘貼添加就好

if (!HTMLCanvasElement.prototype.toBlob) {

? Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {

? ? value: function (callback, type, quality) {

? ? ? var dataURL = this.toDataURL(type, quality).split(',')[1];

? ? ? setTimeout(function() {

? ? ? ? var binStr = atob( dataURL ),

? ? ? ? ? ? len = binStr.length,

? ? ? ? ? ? arr = new Uint8Array(len);

? ? ? ? for (var i = 0; i < len; i++ ) {

? ? ? ? ? arr[i] = binStr.charCodeAt(i);

? ? ? ? }

? ? ? ? callback( new Blob( [arr], {type: type || 'image/jpeg'} ) );

? ? ? });

? ? }

? });

}

#參考資料

MIME 類型

HTMLCanvasElement.toBlob()

FileReader

Canvas API

CanvasRenderingContext2D.drawImage()


查看原文

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末撕氧,一起剝皮案震驚了整個濱河市瘤缩,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌伦泥,老刑警劉巖剥啤,帶你破解...
    沈念sama閱讀 216,744評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異不脯,居然都是意外死亡府怯,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,505評論 3 392
  • 文/潘曉璐 我一進店門防楷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來牺丙,“玉大人,你說我怎么就攤上這事复局〕宀荆” “怎么了?”我有些...
    開封第一講書人閱讀 163,105評論 0 353
  • 文/不壞的土叔 我叫張陵亿昏,是天一觀的道長峦剔。 經(jīng)常有香客問我,道長角钩,這世上最難降的妖魔是什么吝沫? 我笑而不...
    開封第一講書人閱讀 58,242評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮递礼,結果婚禮上惨险,老公的妹妹穿的比我還像新娘。我一直安慰自己脊髓,他們只是感情好辫愉,可當我...
    茶點故事閱讀 67,269評論 6 389
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著将硝,像睡著了一般恭朗。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上袋哼,一...
    開封第一講書人閱讀 51,215評論 1 299
  • 那天冀墨,我揣著相機與錄音闸衫,去河邊找鬼涛贯。 笑死,一個胖子當著我的面吹牛蔚出,可吹牛的內容都是我干的弟翘。 我是一名探鬼主播虫腋,決...
    沈念sama閱讀 40,096評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼稀余!你這毒婦竟也來了悦冀?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 38,939評論 0 274
  • 序言:老撾萬榮一對情侶失蹤睛琳,失蹤者是張志新(化名)和其女友劉穎盒蟆,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體师骗,經(jīng)...
    沈念sama閱讀 45,354評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡历等,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,573評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了辟癌。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片寒屯。...
    茶點故事閱讀 39,745評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖黍少,靈堂內的尸體忽然破棺而出寡夹,到底是詐尸還是另有隱情,我是刑警寧澤厂置,帶...
    沈念sama閱讀 35,448評論 5 344
  • 正文 年R本政府宣布菩掏,位于F島的核電站,受9級特大地震影響农渊,放射性物質發(fā)生泄漏患蹂。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,048評論 3 327
  • 文/蒙蒙 一砸紊、第九天 我趴在偏房一處隱蔽的房頂上張望传于。 院中可真熱鬧,春花似錦醉顽、人聲如沸沼溜。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,683評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽系草。三九已至,卻和暖如春唆涝,著一層夾襖步出監(jiān)牢的瞬間找都,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,838評論 1 269
  • 我被黑心中介騙來泰國打工廊酣, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留能耻,地道東北人。 一個月前我還...
    沈念sama閱讀 47,776評論 2 369
  • 正文 我出身青樓,卻偏偏與公主長得像晓猛,于是被迫代替她去往敵國和親饿幅。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,652評論 2 354

推薦閱讀更多精彩內容