壓縮圖片的原理??‍????‍??

其實我們實現(xiàn)壓縮的本質(zhì)原理是通過使用canvas中的toDataURL來進行圖片的壓縮操作，但是中間需要經(jīng)過一系列的加工處理，下面我將詳細的講解細節(jié)的操作：

 const init=()=>{
 ?const selectPicture = document.querySelector("#selectImg");
 ?const originalPreview = document.querySelector("#imgPreview");
 ?const compressPreview = document.querySelector("#compressImg");
 ?// 綁定點擊事件
 ?function BindEvent() {
 ? ?selectPicture.addEventListener("change", (e) => {
 ? ? ?const imgFiles = e.target.files[0];
 ? ? ?console.log(e.target.files[0]);
 ? ? ?fn(imgFiles);
 ?  });
  } ?
 ? BindEvent();
 ? ?.....剩余內(nèi)容在下面
 }
 init()

• 首先我們創(chuàng)建一個init函數(shù)，我們的代碼都寫在這個函數(shù)中，并且我們還在里面寫了一個BindEvent函數(shù)，將所有的點擊事件都寫在這個函數(shù)中，這樣做的目的是使代碼更加的模塊化
• 首先我們要獲取DOM對象，其中我們還要給selectPicture綁定一個change事件，這個元素其實是input type類型為file，當我們觸發(fā)事件的時候會讓我們選擇一個圖片資源我們可以通過e.target.files[0]來獲取這個圖片的屬性包含這個圖片的名稱（name），類型（type）等
• 緊接著我們要將獲取到的圖片的屬性傳遞給fn這個函數(shù)，這個函數(shù)要對圖片進行一些后續(xù)的處理

FileReader對象 ????

首先我們先了解一下FileReader這個對象

簡單的來講就是FileReader這個對象允許應用程序異步的讀取計算機的文件內(nèi)容，其中這個對象提供了一些方法，我們等會會用到它提供的一些方法。

• readAsDataURL(file)：讀取文件內(nèi)容，結(jié)果用data:url的字符串形式表示
• readAsText(file,encoding)：按字符讀取文件內(nèi)容，結(jié)果用字符串形式表示
• readAsArrayBuffer(file)：按字節(jié)讀取文件內(nèi)容，結(jié)果用ArrayBuffer對象表示

 // 讀取圖片原始的base64
 ?const fn = (imgFiles) => {
 ? ?const render = new FileReader();
 ? ?render.readAsDataURL(imgFiles);
 ? ?render.onload = () => {
 ? ? ?// console.log(render.result);
 ? ? ?// 將圖片壓縮處理
 ? ? ?originalPreview.setAttribute("src", render.result);
 ? ? ?imageCompression(render.result, 40, "image/jpg");
 ?  };
 ? ?// 將圖片轉(zhuǎn)化為base64形式
  };

在這個函數(shù)中我們通過調(diào)用readAsDataURL這個方法，這個方法可以用來讀取指定的文件，在讀取完成之后在render上面的 result屬性將包含一個data:URL格式的字符串 （base64編碼） 以表示所讀取文件的內(nèi)容。

我們在使用 readAsDataURL 方法的一般流程如下：

• 獲取文件對象（例如，通過文件選擇框選擇文件）
• 創(chuàng)建一個 FileReader 對象 (即為new FileReader())。
• 為 FileReader 對象綁定 onload 事件處理程序，以在文件讀取完成時執(zhí)行相應的操作。
• 調(diào)用 readAsDataURL 方法，將文件作為參數(shù)傳遞給它。
• 在 onload 事件處理程序中，通過 result 屬性獲取讀取到的數(shù)據(jù) URL。(這個數(shù)據(jù)的格式是base64)

我們在這個函數(shù)中將原始圖片通過setAttribute方法給src屬性設置值render.result（base64）

在這里我們接下來就需要調(diào)用壓縮圖片的函數(shù)

首先這個函數(shù)接收三個值分別是:

• imageURL:圖片的路徑，這里是指處理過的路徑（我們這里是base64格式）
• quality：轉(zhuǎn)換之后的圖片質(zhì)量，這里這里取值是（0-100）
• imageType：這個表示圖片的格式（這里的圖片格式就是在Files中的圖片格式 ，也就是通過e.target.files[0]中的圖片格式）

圖片壓縮函數(shù)??‍♀???‍♀?

 // 壓縮函數(shù)
 ?const imageCompression = (imageURL, quality, imageType) => {
 ? ?let canvas = document.createElement("canvas");
 ? ?let img = document.createElement("img");
 ? ?img.src = imageURL;
 ? ?img.onload = () => {
 ? ? ?// 在實際的工作中，根據(jù)業(yè)務來計算相應的寬度，這里只是進行一個演示的小demo
 ? ? ?canvas.width = 300;
 ? ? ?canvas.height = 300;
 ? ? ?// 獲取上下文
 ? ? ?let ctx = canvas.getContext("2d");
 ? ? ?ctx.drawImage(img, 0, 0, 300, 300);
 ? ? ?// 將圖片壓縮
 ? ? ?let compressImage = canvas.toDataURL(imageType, quality / 100);
 ? ? ?console.log(compressImage);
 ? ? ?compressPreview.setAttribute("src", compressImage);
 ?  };
  };

• 首先在這個函數(shù)中我們要創(chuàng)建canvas元素和一個img元素
• 我們要給創(chuàng)建的img元素的src賦值為imgURL，緊接著我們需要給img注冊onload方法，確保在img加載完成之后執(zhí)行壓縮操作
• 在加載事件中通過canvas創(chuàng)建上下文，這里我們創(chuàng)建一個2d的上下文（創(chuàng)建一個CanvasRenderingContext2D對象作為2D渲染的上下文）
• 我們還需要給canvas設置寬高，當然這里我們只是做一個示例，因此我們的寬高都定義為300，在實際的開發(fā)中要以真實的業(yè)務需求為主。
• 前期工作做完之后我們就通過調(diào)用創(chuàng)建的上下文ctx來調(diào)用drawImage將圖片畫在canvas（畫布）上，繪制的起始點是 (0, 0)，繪制后的寬度和高度都被設置為 300 像素。這意味著最終壓縮得到的圖像大小將是 300x300 像素。
• 然后我們就要實現(xiàn)最終的壓縮操作了，通過調(diào)用canvas上的toDataURL方法來實現(xiàn)壓縮操作，這個方法接受兩個參數(shù)imageType 表示輸出的數(shù)據(jù) URL 的圖像類型（如 "image/jpeg"、"image/png" 等），quality 表示圖像的質(zhì)量，取值范圍為 0 到 1，所以我們要對傳遞進來的quality/100
• 最后將壓縮的圖片通過setAttribute設置到src上面。

壓縮前后的圖片進行對比：??‍♀??‍♀

大小的改變：

片大小上縮小了3倍。這節(jié)省了空間，在一些顯示圖片很多的網(wǎng)站就可以使用這種壓縮，在頁面展示的時候可以顯示這種壓縮之后的圖片，當點擊進去之后可以顯示原本沒有壓縮的圖片，這樣就節(jié)省了很多的性能。

但是壓縮之后的圖片確實沒有之前美觀，所以這是有舍有得，我們可以在具體的情景中靈活的使用。

總結(jié)????

這次通過對圖片壓縮的學習，是自己有了解學習了之前所不知道的知識，比如圖片的存儲形式以及FileReader之類的，使自己收獲很多。

以上就是通過JavaScript實現(xiàn)圖片壓縮的詳細內(nèi)容，更多關于JavaScript壓縮圖片的資料請關注腳本之家其它相關文章！

最新評論