前言

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

壓縮思路

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

• 獲取上傳 Input 中的圖片對象 File

• 將圖片轉(zhuǎn)換成 base64 格式

• base64 編碼的圖片通過 Canvas 轉(zhuǎn)換壓縮，這里會用到的 Canvas 的 drawImage 以及 toDataURL 這兩個 Api，一個調(diào)節(jié)圖片的分辨率的，一個是調(diào)節(jié)圖片壓縮質(zhì)量并且輸出的，后續(xù)會有詳細介紹

• 轉(zhuǎn)換后的圖片生成對應(yīng)的新圖片，然后輸出

優(yōu)缺點介紹

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

• 優(yōu)點：實現(xiàn)簡單，參數(shù)可以配置化，自定義圖片的尺寸，指定區(qū)域裁剪等等。

• 缺點：只有 jpeg 、webp 支持原圖尺寸下圖片質(zhì)量的調(diào)整來達到壓縮圖片的效果，其他圖片格式，僅能通過調(diào)節(jié)尺寸來實現(xiàn)

代碼實現(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()?{//?獲取文件對象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();?//新建一個img標簽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?<?rawLength;?++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>

上面的代碼是可以直接拿來看效果的，不喜歡用 Vue 的也可以把代碼稍微調(diào)整一下，下面開始具體分解一下代碼的實現(xiàn)思路

Input 上傳 File 處理

將 File 對象通過?FileReader?的?readAsDataURL?方法轉(zhuǎn)換為URL格式的字符串（base64 編碼）

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

Canvas 處理 File 對象

建立一個?Image?對象，一個?canvas?畫布，設(shè)定自己想要下載的圖片尺寸，調(diào)用?drawImage?方法在 canvas 中繪制上傳的圖片

let?image?=?new?Image();?//新建一個img標簽 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

就是圖片對象，可以是頁面上獲取的 DOM 對象，也可以是虛擬 DOM 中的圖片對象。

dx、dy、dWidth、dHeight

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

sx、sy、swidth、sheight

這 4 個參數(shù)是用來裁剪源圖片的，表示圖片在?canvas?畫布上顯示的大小和位置。sx, sy?表示在源圖片上裁剪位置的 X 軸、Y 軸坐標，然后以?swidth, sheight?尺寸來選擇一個區(qū)域范圍，裁剪出來的圖片作為最終在 Canvas 上顯示的圖片內(nèi)容（?swidth, sheight不說明的情況下，整個矩形（裁剪）從坐標的?sx?和?sy?開始，到圖片的右下角結(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);

Api 中奇怪之處在于，sx、sy、swidth、sheight 為選填參數(shù)，但位置在 dx、dy、dWidth、dHeight 之前。

Canvas 輸出圖片

調(diào)用?canvas?的?toDataURL?方法可以輸出 base64 格式的圖片。

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

Api 解析：toDataURL

canvas.toDataURL(type,?encoderOptions);

type 可選

圖片格式，默認為 image/png。

encoderOptions 可選

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

a 標簽的下載

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

Api 解析：download

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

filename

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

href

文件的下載地址。

非主流瀏覽器下載處理

到此可以解決 Chroma 、 Firefox 和 Safari（自測支持） 瀏覽器的下載功能，因為 IE 等瀏覽器不支持?download?屬性，所以需要進行其他方式的下載，也就有了代碼中的后續(xù)內(nèi)容

//?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?<?rawLength;?++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ù)拆分后，通過?atob?方法解碼

• 將解碼后的數(shù)據(jù)轉(zhuǎn)換成 Uint8Array 格式的無符號整形數(shù)組

• 轉(zhuǎn)換后的數(shù)組來生成一個 Blob 數(shù)據(jù)對象，通過?URL.createObjectURL(blob)?來生成一個臨時的 DOM 對象

• 之后 IE 類瀏覽器可以調(diào)用?window.navigator.msSaveOrOpenBlob?方法來執(zhí)行下載，其他瀏覽器也可以繼續(xù)通過?<a>?標簽的?download?屬性來進行下載

Api 解析：atob

base-64 解碼使用方法是 atob()。

window.atob(encodedStr)

encodedStr

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

Api 解析：Uint8Array

new?Uint8Array(length)

length

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

Api 解析：Blob

Blob?對象表示一個不可變、原始數(shù)據(jù)的類文件對象。

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

obj

字符串內(nèi)容

createType

要構(gòu)造的類型

兼容性 IE 10 以上

Api 解析：createObjectURL

靜態(tài)方法會創(chuàng)建一個 DOMString。

objectURL?=?URL.createObjectURL(object);

object

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

Api 解析：window.navigator

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

blob

要下載的 blob 對象

fileName

下載后命名的文件名稱。

總結(jié)

本文僅針對圖片壓縮介紹了一些思路，簡單的使用場景可能如下介紹，當然也會引申出來更多的使用場景，這些還有待大家一起挖掘。

• 上傳存儲圖片如果需要對文件大小格式有要求的，可以統(tǒng)一壓縮處理圖片

• 前臺頁面想要編輯圖片，可以在 Canvas 處理圖片的時候，加一些其他邏輯，例如添加文字，剪裁，拼圖等等操作

當然溫馨提示：因部分接口有 IE 兼容性問題，IE 瀏覽器方面，僅能支持 IE 10 以上版本進行下載。

招賢納士

如果你想改變一直被事折騰，希望開始能折騰事；如果你想改變一直被告誡需要多些想法，卻無從破局；如果你想改變你有能力去做成那個結(jié)果，卻不需要你；如果你想改變你想做成的事需要一個團隊去支撐，但沒你帶人的位置；如果你想改變既定的節(jié)奏，將會是“5 年工作時間 3 年工作經(jīng)驗”；如果你想改變本來悟性不錯，但總是有那一層窗戶紙的模糊… 如果你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的自己。如果你希望參與到隨著業(yè)務(wù)騰飛的過程，親手推動一個有著深入的業(yè)務(wù)理解、完善的技術(shù)體系、技術(shù)創(chuàng)造價值、影響力外溢的前端團隊的成長歷程，我覺得我們該聊聊。任何時間，等著你寫點什么，發(fā)給?ZooTeam@cai-inc.com

總結(jié)

以上是生活随笔為你收集整理的图片压缩原理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。