端實(shí)現(xiàn)圖片壓縮的背景

我們都知道在“寸土寸金”的互聯(lián)網(wǎng)時(shí)代, 速度是第一競爭力, 雖然我們的5G發(fā)展已經(jīng)搖搖領(lǐng)先, 但是也經(jīng)不住用戶在一個(gè)網(wǎng)頁里傳很多“巨無霸”圖片, 最終導(dǎo)致的結(jié)果就是頁面“龜速”打開......

那么作為技術(shù)人, 當(dāng)然也有一堆的解決方案, 比如:

壓縮圖片再上傳
將圖片上傳到圖床, 利用圖床壓縮能力和CDN節(jié)點(diǎn)就近分發(fā)
圖片流式加載
圖片懶加載/ 預(yù)加載

當(dāng)然聰明的小伙伴也會(huì)將上面的方案組合, 設(shè)計(jì)更優(yōu)秀的圖片“提速”方案.

今天不會(huì)和大家把所有方案都介紹一遍, 因?yàn)榫W(wǎng)上也有很多實(shí)踐, 接下來會(huì)從前端技術(shù)提升的角度, 分享一下如何用原生 javascript, 實(shí)現(xiàn)從圖片上傳到圖片自定義壓縮的完整方案. 大家可以把文章中介紹的方案直接用于自己的實(shí)際開發(fā)中, 或者基于它設(shè)計(jì)更棒的圖片壓縮方案.

實(shí)現(xiàn)圖片壓縮的方案

前端實(shí)現(xiàn)圖片壓縮無非就是在用戶上傳圖片文件后, 將file轉(zhuǎn)換成image對象, 然后再利用canvas 及其 api 將圖片壓縮成指定體積. 如下流程:

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

首先我們先實(shí)現(xiàn)將file轉(zhuǎn)換成image對象, 這里我們用到了FileReader API, 代碼如下:

// 壓縮前將file轉(zhuǎn)換成img對象
function readImg(file:File) {
    return new Promise((resolve, reject) => {
     const img = new Image()
     const reader = new FileReader()
     reader.onload = function(e:any) {
      img.src = e.target.result
     }
     reader.onerror = function(e) {
      reject(e)
     }
     reader.readAsDataURL(file)
     img.onload = function() {
      resolve(img)
     }
     img.onerror = function(e) {
      reject(e)
     }
    })
}

這里使用 promise 來設(shè)計(jì)生成圖片數(shù)據(jù)的方法, 接下來我們看看核心的圖片壓縮源碼:

/**
 * 壓縮圖片
 * @param img 被壓縮的img對象
 * @param type 壓縮后轉(zhuǎn)換的文件類型
 * @param mx 觸發(fā)壓縮的圖片最大寬度限制
 * @param mh 觸發(fā)壓縮的圖片最大高度限制
 * @param quality 圖片質(zhì)量
 */
 function compressImg(img: any, type:string, mx: number, mh: number, quality:number = 1) {
    return new Promise((resolve, reject) => {
     const canvas = document.createElement('canvas')
     const context = canvas.getContext('2d')
     const { width: originWidth, height: originHeight } = img
     // 最大尺寸限制
     const maxWidth = mx
     const maxHeight = mh
     // 目標(biāo)尺寸
     let targetWidth = originWidth
     let targetHeight = originHeight
     if (originWidth > maxWidth || originHeight > maxHeight) {
      if (originWidth / originHeight > 1) {
       // 寬圖片
       targetWidth = maxWidth
       targetHeight = Math.round(maxWidth * (originHeight / originWidth))
      } else {
       // 高圖片
       targetHeight = maxHeight
       targetWidth = Math.round(maxHeight * (originWidth / originHeight))
      }
     }
     canvas.width = targetWidth
     canvas.height = targetHeight
     context?.clearRect(0, 0, targetWidth, targetHeight)
     // 圖片繪制
     context?.drawImage(img, 0, 0, targetWidth, targetHeight)
     canvas.toBlob(function(blob) {
      resolve(blob)
     }, type || 'image/png', quality) 
    })
}

這里通過控制 canvas的寬高, 以及對 canvas 的 toBlob設(shè)置參數(shù), 來實(shí)現(xiàn)自定義的圖片壓縮.

如果大家對代碼有不理解的地方, 也可以在文末發(fā)表問題, 我會(huì)做出對應(yīng)的解答.

更多前端提效方案

xijs 一款面向復(fù)雜業(yè)務(wù)場景的javascript工具庫
react-slider-vertify 基于react實(shí)現(xiàn)的滑動(dòng)驗(yàn)證碼組件
react-cropper-pro 支持圖片上傳+裁切+壓縮的組件
h5-dooring 在線H5頁面制作工具
v6.Dooring 可視化大屏搭建平臺

實(shí)現(xiàn) HTML 壓縮，可以使用 JavaScript 中的正則表達(dá)式來去除 HTML 中的空格和注釋。以下是一個(gè)簡單的 HTML 壓縮函數(shù)：

function compressHTML(html) {
  // 去除注釋
  html = html.replace(/<!--[\s\S]*?-->/g, "");
  // 去除多余空白
  html = html.replace(/\s+/g, " ");
  // 去除標(biāo)簽之間空格
  html = html.replace(/>\s+</g, "><");
  return html.trim();
}

該函數(shù)首先使用正則表達(dá)式去除 HTML 中的注釋。然后，它使用另一個(gè)正則表達(dá)式去除 HTML 中的多余空格。最后，它使用另一個(gè)正則表達(dá)式去除標(biāo)簽之間的空格。

為了測試該函數(shù)，您可以創(chuàng)建一個(gè) HTML 文件，并在其中添加一些冗余的空格和注釋。例如：

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <!-- This is a comment -->
    <h1> Welcome to my website! </h1>
    <p> This is some text. </p>
  </body>
</html>

然后，您可以在Node.JS中使用以下代碼將 HTML 文件加載為字符串并壓縮它：

// 加載 HTML 文件
const fs = require("fs");
const html = fs.readFileSync("index.html", "utf8");
// 壓縮 HTML
const compressedHtml = compressHTML(html);
console.log(compressedHtml);

輸出是一個(gè)壓縮后的 HTML 字符串，其中不包含注釋或冗余空格。

或者直接在IE中測試，代碼如下：

function compressHTML(html) {
  // 去除注釋
  html = html.replace(/<!--[\s\S]*?-->/g, "");
  // 去除多余空白
  html = html.replace(/\s+/g, " ");
  // 去除標(biāo)簽之間空格
  html = html.replace(/>\s+</g, "><");
  return html.trim();
}
var html =`
<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <!-- This is a comment -->
    <h1> Welcome to my website! </h1>
    <p> This is some text. </p>
  </body>
</html>
`;
console.log(compressHTML(html));

運(yùn)行效果：

景

實(shí)際生產(chǎn)中經(jīng)常遇到這樣的場景：為減小服務(wù)器壓力，上傳附件尤其是圖片的時(shí)候，往往需要限制上傳文件的大小。而限制的方案也有兩種，一種就是限制用戶可上傳的文件大小，由用戶來選擇上傳的文件和如果文件過大由用戶自行進(jìn)行壓縮裁剪；另一種就是由服務(wù)進(jìn)行圖片的壓縮和大小控制然后再上傳到服務(wù)器。這里主要介紹的是第二種方案。

回到頂部

主要技術(shù)

前邊有介紹過證書的生成和下載，其中就有證書的壓縮和打包的相關(guān)操作，感興趣的可以看下本人的那篇文章。這里同樣是采用的該原理，步驟如下：

回到頂部

關(guān)鍵步驟

圖片文件-->文件流（base64位編碼）-->canvas-->壓縮-->生成壓縮后的文件-->上傳。

這里的壓縮過程，做了相應(yīng)的優(yōu)化。優(yōu)化方案有兩種，一種是重復(fù)壓縮，一種是計(jì)算比例壓縮。

而由于壓縮比和文件大小并不是正比例關(guān)系，所有可以保險(xiǎn)起見再乘以一個(gè)系數(shù)。比如：quality: 1024*0.7/fileObj.size（0.7是保險(xiǎn)系數(shù)，1024是限制大小1M的意思，可根據(jù)個(gè)人需要自行調(diào)整參數(shù)，也可以封裝成接口參數(shù)統(tǒng)一修改）

這里還自行封裝了一個(gè)進(jìn)度組件，使用的是原生js。

回到頂部

代碼

代碼和相關(guān)注釋如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>文件壓縮上傳</title>
 <script type="text/javascript">
 /*
 三個(gè)參數(shù)
 file：一個(gè)是文件(類型是圖片格式)，
 w：一個(gè)是文件壓縮的后寬度，寬度越小，字節(jié)越小
 objDivOrCallback：一個(gè)是容器或者回調(diào)函數(shù)
 photoCompress()
 */
 function photoCompress(file,w,objDivOrCallback) {
 var ready = new FileReader()
 /*開始讀取指定的Blob對象或File對象中的內(nèi)容. 當(dāng)讀取操作完成時(shí),readyState屬性的值會(huì)成為DONE,如果設(shè)置了onloadend事件處理程序,則調(diào)用之.同時(shí),result屬性中將包含一個(gè)data: URL格式的字符串以表示所讀取文件的內(nèi)容.*/
 ready.readAsDataURL(file)
 ready.onload = function() {
 var re = this.result
 canvasDataURL(re, w, objDivOrCallback)
 }
 }
 function canvasDataURL(path, obj, callback) {
 var img = new Image()
 img.src = path
 img.onload = function(){
 var that = this
 // 默認(rèn)按比例壓縮
 var w = that.width,
 h = that.height,
 scale = w / h
 w = obj.width || w
 h = obj.height || (w / scale)
 var quality = 0.7 // 默認(rèn)圖片質(zhì)量為0.7
 //生成canvas
 var canvas = document.createElement('canvas')
 var ctx = canvas.getContext('2d')
 // 創(chuàng)建屬性節(jié)點(diǎn)
 var anw = document.createAttribute("width")
 anw.nodeValue = w
 var anh = document.createAttribute("height")
 anh.nodeValue = h
 canvas.setAttributeNode(anw)
 canvas.setAttributeNode(anh)
 ctx.drawImage(that, 0, 0, w, h)
 // 圖像質(zhì)量
 if(obj.quality && obj.quality <= 1 && obj.quality > 0) {
 quality = obj.quality
 }
 // quality值越小，所繪制出的圖像越模糊
 var base64 = canvas.toDataURL('image/jpeg', quality)
 // 這里不能直接quality: 0.2，因?yàn)檫@樣就相當(dāng)于還是在原來的大小的基礎(chǔ)上壓縮
 var bl = convertBase64UrlToBlob(base64)
 // 如果還大于1M，繼續(xù)壓縮--代碼待優(yōu)化，可以減去重復(fù)生成文件和轉(zhuǎn)碼的過程
 if (bl.size/1024 > 1025) {
 // 其實(shí)也可以在這里直接寫一個(gè)匹配壓縮比直到大小小于1的方法
 photoCompress(bl, {
 quality: 0.5 * obj.quality
 }, callback)
 } else {
 callback(bl)
 }
 // 回調(diào)函數(shù)返回base64的值--改為返回文件對象
 // callback(base64)
 }
 }
 /**
 * 將以base64的圖片url數(shù)據(jù)轉(zhuǎn)換為Blob
 * @param urlData
 * 用url方式表示的base64圖片數(shù)據(jù)
 */
 function convertBase64UrlToBlob(urlData) {
 var arr = urlData.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})
 }
 var xhr
 //上傳文件方法
 function UpladFile() {
 var fileObj = document.getElementById("file").files[0] // js 獲取文件對象
 var url = "http://api.test.cn/file/publicFile/upload" // 接收上傳文件的后臺地址 
 var form = new FormData() // FormData 對象
 if(fileObj.size/1024 > 1025) { //大于1M，進(jìn)行壓縮上傳
 photoCompress(fileObj, {
 // 這里還有一種方案，那就是這里的quality改為計(jì)算壓縮比（由于壓縮比和文件大小并不是正比例關(guān)系，所有可以保險(xiǎn)起見再乘以一個(gè)系數(shù)）
 // 壓縮比計(jì)算的方案:quality: 1024*0.7/fileObj.size--0.7是保險(xiǎn)系數(shù)--這些參數(shù)可以進(jìn)一步封裝
 quality: 0.2
 // }, function(base64Codes){
 // 修改為返回文件對象
 }, function(bl){
 //console.log("壓縮后：" + base.length / 1024 + " " + base);
 // var bl = convertBase64UrlToBlob(base64Codes)
 // form.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件對象
 form.append("multipartFile", bl, "file_"+Date.parse(new Date())+".jpg") // 文件對象
 xhr = new XMLHttpRequest() // XMLHttpRequest 對象
 xhr.open("post", url, true) //post方式，url為服務(wù)器請求地址，true 該參數(shù)規(guī)定請求是否異步處理。
 xhr.setRequestHeader("enctype", "multipart/form-data") // 設(shè)置請求頭
 xhr.setRequestHeader("Authorization", "Bearer 8d782bb1-768f-4fa7-80d2-5e2b6d6a6f64") // 設(shè)置請求頭
 // open后才可以設(shè)置頭
 xhr.onload = uploadComplete //請求完成
 xhr.onerror = uploadFailed //請求失敗
 xhr.upload.onprogress = progressFunction//【上傳進(jìn)度調(diào)用方法實(shí)現(xiàn)】
 xhr.upload.onloadstart = function(){//上傳開始執(zhí)行方法
 ot = new Date().getTime() //設(shè)置上傳開始時(shí)間
 oloaded = 0//設(shè)置上傳開始時(shí)，以上傳的文件大小為0
 };
 xhr.send(form) //開始上傳，發(fā)送form數(shù)據(jù)
 })
 } else { //小于等于1M 原圖上傳
 // form.append("file", fileObj) // 文件對象
 form.append("multipartFile", fileObj) // 文件對象
 xhr = new XMLHttpRequest() // XMLHttpRequest 對象
 xhr.open("post", url, true) //post方式，url為服務(wù)器請求地址，true 該參數(shù)規(guī)定請求是否異步處理。
 xhr.setRequestHeader("enctype", "multipart/form-data") // 設(shè)置請求頭
 xhr.setRequestHeader("Authorization", "Bearer 8d782bb1-768f-4fa7-80d2-5e2b6d6a6f64") // 設(shè)置請求頭
 // open后才可以設(shè)置頭
 xhr.onload = uploadComplete //請求完成
 xhr.onerror = uploadFailed //請求失敗
 xhr.upload.onprogress = progressFunction//【上傳進(jìn)度調(diào)用方法實(shí)現(xiàn)】
 xhr.upload.onloadstart = function() {//上傳開始執(zhí)行方法
 ot = new Date().getTime() //設(shè)置上傳開始時(shí)間
 oloaded = 0//設(shè)置上傳開始時(shí)，以上傳的文件大小為0
 }
 xhr.send(form) //開始上傳，發(fā)送form數(shù)據(jù)
 }
 }
 //上傳成功響應(yīng)
 function uploadComplete(evt) {
 //服務(wù)斷接收完文件返回的結(jié)果
 var data = JSON.parse(evt.target.responseText)
 if(data.code === 200) {
 uploadSuccess()
 } else {
 uploadFailed()
 }
 }
 //上傳失敗
 function uploadFailed(evt) {
 alert("上傳失敗！")
 }
 //上傳成功
 function uploadSuccess(evt) {
 alert("上傳成功！")
 }
 //取消上傳
 function cancleUploadFile(){
 xhr.abort()
 }
 //上傳進(jìn)度實(shí)現(xiàn)方法，上傳過程中會(huì)頻繁調(diào)用該方法
 function progressFunction(evt) {
 var progressBar = document.getElementById("progressBar")
 var percentageDiv = document.getElementById("percentage")
 // event.total是需要傳輸?shù)目傋止?jié)，event.loaded是已經(jīng)傳輸?shù)淖止?jié)。如果event.lengthComputable不為真，則event.total等于0
 if (evt.lengthComputable) {//
 progressBar.max = evt.total
 progressBar.value = evt.loaded
 percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%"
 }
 var time = document.getElementById("time")
 var nt = new Date().getTime()//獲取當(dāng)前時(shí)間
 var pertime = (nt-ot)/1000 //計(jì)算出上次調(diào)用該方法時(shí)到現(xiàn)在的時(shí)間差，單位為s
 ot = new Date().getTime() //重新賦值時(shí)間，用于下次計(jì)算
 var perload = evt.loaded - oloaded //計(jì)算該分段上傳的文件大小，單位b
 oloaded = evt.loaded//重新賦值已上傳文件大小，用以下次計(jì)算
 //上傳速度計(jì)算
 var speed = perload/pertime//單位b/s
 var bspeed = speed
 var units = 'b/s'//單位名稱
 if(speed/1024>1) {
 speed = speed/1024
 units = 'k/s'
 }
 if(speed/1024>1) {
 speed = speed/1024
 units = 'M/s'
 }
 speed = speed.toFixed(1)
 //剩余時(shí)間
 var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1)
 time.innerHTML = '，速度：'+speed+units+'，剩余時(shí)間：'+resttime+'s'
 if(bspeed==0) time.innerHTML = '上傳已取消'
 }
 </script>
</head>
<body>
<progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>
<span id="percentage"></span><span id="time"></span>
<br /><br />
<input type="file" id="file" name="myfile" accept="image/x-png, image/jpg, image/jpeg, image/gif"/>
<input type="button" onclick="UpladFile()" value="上傳" />
<input type="button" onclick="cancleUploadFile()" value="取消" />
</body>
</html>

此處是借鑒網(wǎng)上思路的基礎(chǔ)上的個(gè)人修改完善后的代碼，并且有待有時(shí)間的時(shí)候做進(jìn)一步封裝優(yōu)化和封裝成npm組件以及vue組件。

擴(kuò)展

png圖片的另一種壓縮方案

png的簡介

什么是png：

PNG的全稱叫便攜式網(wǎng)絡(luò)圖型（Portable Network Graphics）是目前最流行的網(wǎng)絡(luò)傳輸和展示的圖片格式，原因有如下幾點(diǎn)：

無損壓縮：PNG圖片采取了基于LZ77派生算法對文件進(jìn)行壓縮，使得它壓縮比率更高，生成的文件體積更小，并且不損失數(shù)據(jù)。
體積小：它利用特殊的編碼方法標(biāo)記重復(fù)出現(xiàn)的數(shù)據(jù)，使得同樣格式的圖片，PNG圖片文件的體積更小。網(wǎng)絡(luò)通訊中因受帶寬制約，在保證圖片清晰、逼真的前提下，優(yōu)先選擇PNG格式的圖片。
支持透明效果：PNG支持對原圖像定義256個(gè)透明層次，使得圖像的邊緣能與任何背景平滑融合，這種功能是GIF和JPEG沒有的。

當(dāng)初就是因?yàn)閜ng的透明特性才開始喜歡它的。

png的類型：

PNG 8：PNG 8中的8，其實(shí)指的是8bits，相當(dāng)于用2^8（2的8次方）大小來存儲一張圖片的顏色種類，2^8等于256，也就是說PNG 8能存儲256種顏色，一張圖片如果顏色種類很少，將它設(shè)置成PNG 8得圖片類型是非常適合的。
PNG 24：PNG 24中的24，相當(dāng)于3乘以8 等于 24，就是用三個(gè)8bits分別去表示 R（紅）、G（綠）、B（藍(lán)）。R(0~255),G(0~255),B(0~255)，可以表達(dá)256乘以256乘以256=16777216種顏色的圖片，這樣PNG 24就能比PNG 8表示色彩更豐富的圖片。但是所占用的空間相對就更大了。
PNG 32：PNG 32中的32，相當(dāng)于PNG 24 加上 8bits的透明顏色通道，就相當(dāng)于R（紅）、G（綠）、B（藍(lán)）、A（透明）。R(0~255),G(0~255),B(0~255),A(0~255)。比PNG 24多了一個(gè)A（透明），也就是說PNG 32能表示跟PNG 24一樣多的色彩，并且還支持256種透明的顏色，能表示更加豐富的圖片顏色類型。

png圖片的數(shù)據(jù)編碼：

PNG圖片的數(shù)據(jù)結(jié)構(gòu)其實(shí)跟http請求的結(jié)構(gòu)很像，都是一個(gè)數(shù)據(jù)頭，后面跟著很多的數(shù)據(jù)塊，如下圖所示：

使用16進(jìn)制編碼打開png圖片，部分編碼示例如下：

8950 4e47 0d0a 1a0a：這個(gè)是PNG圖片的頭，所有的PNG圖片的頭都是這一串編碼，圖片軟件通過這串編碼判定這個(gè)文件是不是PNG格式的圖片。

0000 000d：是iHDR數(shù)據(jù)塊的長度，為13。

4948 4452：是數(shù)據(jù)塊的type,為IHDR，之后緊跟著是data。

0000 0292：是圖片的寬度。

0000 024e：是高度。

以此類推，每一段十六進(jìn)制編碼就代表著一個(gè)特定的含義。感興趣的可以自行百度。

所以，顏色重復(fù)度越大的、越接近的（漸變的顏色或透明度等），編碼重復(fù)度就越大，就越容易壓縮。

壓縮原理：

png圖片用差分編碼（Delta encoding）對圖片進(jìn)行預(yù)處理，處理每一個(gè)的像素點(diǎn)中每條通道的值。

壓縮階段會(huì)將預(yù)處理階段得到的結(jié)果進(jìn)行Deflate壓縮，它由 Huffman 編碼和 LZ77壓縮構(gòu)成。

壓縮后的結(jié)果就是一串處理后的編碼，保存到數(shù)據(jù)庫中，占用空間會(huì)小很多，在使用的時(shí)候，再進(jìn)行逆向解析渲染。

在線咨詢

上一篇：jQuery 事件
下一篇：純css小特效，主要用于登錄頁面 #前端特效#css特效

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

推薦！開箱即用的前端圖片壓縮方案(附源碼)

端實(shí)現(xiàn)圖片壓縮的背景

實(shí)現(xiàn)圖片壓縮的方案

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

更多前端提效方案

您的項(xiàng)目需求