圖片壓縮原理

前言

說(shuō)起圖片壓縮，大家想到的或者平時(shí)用到的很多工具都可以實(shí)現(xiàn)，例如，客戶端類的有圖片壓縮工具 PPDuck3， JS 實(shí)現(xiàn)類的有插件 compression.js ，亦或是在線處理類的 OSS 上傳，文件上傳后，在訪問(wèn)文件時(shí)中也有圖片的壓縮配置選項(xiàng)，不過(guò)，能不能自己擼一套 ?JS 實(shí)現(xiàn)的圖片壓縮代碼呢？當(dāng)然可以，那我們先來(lái)理一下思路。

壓縮思路

涉及到 JS 的圖片壓縮，我的想法是需要用到 Canvas 的繪圖能力，通過(guò)調(diào)整圖片的分辨率或者繪圖質(zhì)量來(lái)達(dá)到圖片壓縮的效果，實(shí)現(xiàn)思路如下：

• 獲取上傳 Input 中的圖片對(duì)象 File
• 將圖片轉(zhuǎn)換成 base64 格式
• base64 編碼的圖片通過(guò) Canvas 轉(zhuǎn)換壓縮，這里會(huì)用到的 Canvas 的 drawImage 以及 toDataURL 這兩個(gè) Api，一個(gè)調(diào)節(jié)圖片的分辨率的，一個(gè)是調(diào)節(jié)圖片壓縮質(zhì)量并且輸出的，后續(xù)會(huì)有詳細(xì)介紹
• 轉(zhuǎn)換后的圖片生成對(duì)應(yīng)的新圖片，然后輸出

優(yōu)缺點(diǎn)介紹

不過(guò) Canvas 壓縮的方式也有著自己的優(yōu)缺點(diǎn)：

• 優(yōu)點(diǎn)：實(shí)現(xiàn)簡(jiǎn)單，參數(shù)可以配置化，自定義圖片的尺寸，指定區(qū)域裁剪等等。
• 缺點(diǎn)：只有 jpeg 、webp 支持原圖尺寸下圖片質(zhì)量的調(diào)整來(lái)達(dá)到壓縮圖片的效果，其他圖片格式，僅能通過(guò)調(diào)節(jié)尺寸來(lái)實(shí)現(xiàn)

代碼實(shí)現(xiàn)

<template>
??<div?class="container">
????<input?type="file"?id="input-img"?@change="compress"?/>
????<a?:download="fileName"?:href="compressImg"?>普通下載a>
????<button?@click="downloadImg">兼容?IE?下載button>
????<div>
??????<img?:src="compressImg"?/>
????div>
??div>
template>
<script>
export?default?{
??name:?'compress',
??data:?function()?{
????return?{
??????compressImg:?null,
??????fileName:?null,
????};
??},
??components:?{},
??methods:?{
????compress()?{
??????//?獲取文件對(duì)象
??????const?fileObj?=?document.querySelector('#input-img').files[0];
??????//?獲取文件名稱，后續(xù)下載重命名
??????this.fileName?=?`${new?Date().getTime()}-${fileObj.name}`;
??????//?獲取文件后綴名
??????const?fileNames?=?fileObj.name.split('.');
??????const?type?=?fileNames[fileNames.length-1];
??????//?壓縮圖片
??????this.handleCompressImage(fileObj,?type);
????},
????handleCompressImage(img,?type)?{
??????const?vm?=?this;
??????let?reader?=?new?FileReader();
??????//?讀取文件
??????reader.readAsDataURL(img);
??????reader.onload?=?function(e)?{
????????let?image?=?new?Image();?//新建一個(gè)img標(biāo)簽
????????image.src?=?e.target.result;
????????image.onload?=?function()?{
??????????let?canvas?=?document.createElement('canvas');
??????????let?context?=?canvas.getContext('2d');
??????????//?定義?canvas?大小，也就是壓縮后下載的圖片大小
??????????let?imageWidth?=?image.width;?//壓縮后圖片的大小
??????????let?imageHeight?=?image.height;
??????????canvas.width?=?imageWidth;
??????????canvas.height?=?imageHeight;
??????????
??????????//?圖片不壓縮，全部加載展示
??????????context.drawImage(image,?0,?0);
??????????//?圖片按壓縮尺寸載入
??????????//?let?imageWidth?=?500;?//壓縮后圖片的大小
??????????//?let?imageHeight?=?200;
??????????//?context.drawImage(image,?0,?0,?500,?200);
??????????//?圖片去截取指定位置載入
??????????//?context.drawImage(image,100,?100,?100,?100,?0,?0,?imageWidth,?imageHeight);
??????????vm.compressImg?=?canvas.toDataURL(`image/${type}`);
????????};
??????};
????},
????//?base64?圖片轉(zhuǎn)?blob?后下載
????downloadImg()?{
??????let?parts?=?this.compressImg.split(';base64,');
??????let?contentType?=?parts[0].split(':')[1];
??????let?raw?=?window.atob(parts[1]);
??????let?rawLength?=?raw.length;
??????let?uInt8Array?=?new?Uint8Array(rawLength);
??????for(let?i?=?0;?i?????????uInt8Array[i]?=?raw.charCodeAt(i);
??????}
??????const?blob?=?new?Blob([uInt8Array],?{type:?contentType});
??????this.compressImg?=?URL.createObjectURL(blob);
??????if?(window.navigator.msSaveOrOpenBlob)?{
????????//?兼容?ie?的下載方式
????????window.navigator.msSaveOrOpenBlob(blob,?this.fileName);
??????}else{
????????const?a?=?document.createElement('a');
????????a.href?=?this.compressImg;
????????a.setAttribute('download',?this.fileName);
????????a.click();
??????}
????},
??}
};
script>

Input 上傳 File 處理

const?fileObj?=?document.querySelector('#input-img').files[0];
let?reader?=?new?FileReader();
//?讀取文件
reader.readAsDataURL(fileObj);

Canvas 處理 File 對(duì)象

let?image?=?new?Image();?//新建一個(gè)img標(biāo)簽
image.src?=?e.target.result;
let?canvas?=?document.createElement('canvas');
let?context?=?canvas.getContext('2d');
context.drawImage(image,?0,?0);

Api 解析：drawImage

context.drawImage(img,?sx,?sy,?sWidth,?sHeight,?dx,?dy,?dWidth,?dHeight);

img

就是圖片對(duì)象，可以是頁(yè)面上獲取的 DOM 對(duì)象，也可以是虛擬 DOM 中的圖片對(duì)象。

表示在?canvas?畫(huà)布上規(guī)劃出一片區(qū)域用來(lái)放置圖片，dx, dy?為繪圖位置在 Canvas 元素的 X 軸、Y 軸坐標(biāo)，dWidth, dHeight?指在 Canvas 元素上繪制圖像的寬度和高度（如果不說(shuō)明， 在繪制時(shí)圖片的寬度和高度不會(huì)縮放）。

sx、sy、swidth、sheight

這 4 個(gè)參數(shù)是用來(lái)裁剪源圖片的，表示圖片在?canvas?畫(huà)布上顯示的大小和位置。sx, sy?表示在源圖片上裁剪位置的 X 軸、Y 軸坐標(biāo)，然后以?swidth, sheight?尺寸來(lái)選擇一個(gè)區(qū)域范圍，裁剪出來(lái)的圖片作為最終在 Canvas 上顯示的圖片內(nèi)容（?swidth, sheight不說(shuō)明的情況下，整個(gè)矩形（裁剪）從坐標(biāo)的?sx?和?sy?開(kāi)始，到圖片的右下角結(jié)束）。

context.drawImage(image,?0,?0,?100,?100);
context.drawImage(image,?300,?300,?200,?200);
context.drawImage(image,?0,?100,?150,?150,?300,?0,?150,?150);

Canvas 輸出圖片

canvas.toDataURL(`image/${type}`);

Api 解析：toDataURL

canvas.toDataURL(type,?encoderOptions);

圖片格式，默認(rèn)為 image/png。

encoderOptions 可選

在指定圖片格式為 image/jpeg 或 image/webp 的情況下，可以從 0 到 1 的區(qū)間內(nèi)選擇圖片的質(zhì)量。如果超出取值范圍，將會(huì)使用默認(rèn)值 0.92。其他參數(shù)會(huì)被忽略。

a 標(biāo)簽的下載

調(diào)用??標(biāo)簽的?download?屬性，即可完成圖片的下載。

Api 解析：download

//?href?下載必填
"filename"?href="href">?下載?</a>

選填，規(guī)定作為文件名來(lái)使用的文本。

href

文件的下載地址。

非主流瀏覽器下載處理

//?base64?圖片轉(zhuǎn)?blob?后下載
downloadImg()?{
??let?parts?=?this.compressImg.split(';base64,');
??let?contentType?=?parts[0].split(':')[1];
??let?raw?=?window.atob(parts[1]);
??let?rawLength?=?raw.length;
??let?uInt8Array?=?new?Uint8Array(rawLength);
??for(let?i?=?0;?i?????uInt8Array[i]?=?raw.charCodeAt(i);
??}
??const?blob?=?new?Blob([uInt8Array],?{type:?contentType});
??this.compressImg?=?URL.createObjectURL(blob);
??if?(window.navigator.msSaveOrOpenBlob)?{
????//?兼容?ie?的下載方式
????window.navigator.msSaveOrOpenBlob(blob,?this.fileName);
??}else{
????const?a?=?document.createElement('a');
????a.href?=?this.compressImg;
????a.setAttribute('download',?this.fileName);
????a.click();
??}
}

• 將之前?canvas?生成的 base64 數(shù)據(jù)拆分后，通過(guò)?atob?方法解碼

• 將解碼后的數(shù)據(jù)轉(zhuǎn)換成 Uint8Array 格式的無(wú)符號(hào)整形數(shù)組
• 轉(zhuǎn)換后的數(shù)組來(lái)生成一個(gè) Blob 數(shù)據(jù)對(duì)象，通過(guò)?URL.createObjectURL(blob)?來(lái)生成一個(gè)臨時(shí)的 DOM 對(duì)象
• 之后 IE 類瀏覽器可以調(diào)用?window.navigator.msSaveOrOpenBlob?方法來(lái)執(zhí)行下載，其他瀏覽器也可以繼續(xù)通過(guò)??標(biāo)簽的?download?屬性來(lái)進(jìn)行下載

Api 解析：atob

window.atob(encodedStr)

必需，是一個(gè)通過(guò) btoa() 方法編碼的字符串，btoa() 是 base64 編碼的使用方法。

Api 解析：Uint8Array

new?Uint8Array(length)

創(chuàng)建初始化為 0 的，包含 length 個(gè)元素的無(wú)符號(hào)整型數(shù)組。

Api 解析：Blob

//?構(gòu)造函數(shù)允許通過(guò)其它對(duì)象創(chuàng)建?Blob?對(duì)象
new?Blob([obj],{type:createType})?

字符串內(nèi)容

createType

要構(gòu)造的類型

兼容性 IE 10 以上

Api 解析：createObjectURL

objectURL?=?URL.createObjectURL(object);

用于創(chuàng)建 URL 的 File 對(duì)象、Blob 對(duì)象或者 MediaSource 對(duì)象。

Api 解析：window.navigator

//?官方已不建議使用的文件下載方式，僅針對(duì)?ie?且兼容性?10?以上
//?msSaveBlob?僅提供下載
//?msSaveOrOpenBlob?支持下載和打開(kāi)
window.navigator.msSaveOrOpenBlob(blob,?fileName);

要下載的 blob 對(duì)象

fileName

下載后命名的文件名稱。

總結(jié)

本文僅針對(duì)圖片壓縮介紹了一些思路，簡(jiǎn)單的使用場(chǎng)景可能如下介紹，當(dāng)然也會(huì)引申出來(lái)更多的使用場(chǎng)景，這些還有待大家一起挖掘。

• 上傳存儲(chǔ)圖片如果需要對(duì)文件大小格式有要求的，可以統(tǒng)一壓縮處理圖片
• 前臺(tái)頁(yè)面想要編輯圖片，可以在 Canvas 處理圖片的時(shí)候，加一些其他邏輯，例如添加文字，剪裁，拼圖等等操作

當(dāng)然溫馨提示：因部分接口有 IE 兼容性問(wèn)題，IE 瀏覽器方面，僅能支持 IE 10 以上版本進(jìn)行下載。