簡介
在本文中，我們將探討如何通過 JavaScript 實現(xiàn)前端圖片壓縮功能。通過壓縮圖片，我們可以降低圖片文件的大小，提高頁面加載速度，減少網(wǎng)絡帶寬消耗，以及改善用戶體驗。我們將通過以下幾個步驟來實現(xiàn)這一功能：
- 創(chuàng)建一個 HTML 文件，設置文件選擇框和觸發(fā)壓縮的按鈕。
- 使用 JavaScript 讀取用戶選擇的圖片文件，并在頁面上顯示原始圖片。
- 編寫 JavaScript 函數(shù)，對原始圖片進行壓縮處理。
- 將壓縮后的圖片顯示在頁面上，并提供壓縮前后圖片大小的比較。
1. HTML 文件設置
首先，我們需要在 HTML 文件中設置一個文件選擇框和一個觸發(fā)壓縮的按鈕：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片壓縮</title>
<style>
img {
max-width: 200px;
margin-right: 10px;
margin-top: 20px;
}
</style>
</head>
<body>
<!-- 文件選擇框 -->
<input type="file" id="fileInput" accept="image/*"/>
<!-- 觸發(fā)壓縮的按鈕 -->
<button class="compressButton">開始壓縮</button>
<script>
// JavaScript 代碼將在下文中介紹
</script>
</body>
</html>
2. JavaScript 實現(xiàn)圖片壓縮
2.1 ### 獲取 Base64 圖片大小
我們首先定義一個函數(shù) getBase64ImageSize，用于獲取 Base64 格式圖片的大小。
// 獲取 base64 圖片的大小
const getBase64ImageSize = (base64String) => {
// 計算 base64 字符串的長度
const len = base64String.length;
// 每個 base64 字符所占用的字節(jié)數(shù)，Base64 編碼中每個字符占用 6 位，即 3 字節(jié)
const bytes = len * 0.75;
// 轉(zhuǎn)換為 KB
const sizeInKB = bytes / 1024;
// 返回圖片大小，保留兩位小數(shù)
return sizeInKB.toFixed(2);
}
2.2 讀取文件并顯示原始圖片
// 顯示原始圖片
const displayOriginalImage = (file) => {
if (!file) {
alert('請選擇圖片');
return;
}
const reader = new FileReader();
reader.onload = () => {
const div = document.createElement('div');
const img = document.createElement('img');
const span = document.createElement('span');
img.src = reader.result;
span.innerText = `原圖大小：${getBase64ImageSize(reader.result)}KB`;
div.appendChild(img);
div.appendChild(span)
document.body.appendChild(div);
}
reader.readAsDataURL(file);
}
// 綁定文件選擇事件
fileInput.addEventListener('change', () => {
const file = fileInput.files[0];
displayOriginalImage(file);
})
````
markdownCopy code
前端圖片壓縮實現(xiàn)指南
簡介
在本文中，我們將探討如何通過 JavaScript 實現(xiàn)前端圖片壓縮功能。通過壓縮圖片，我們可以降低圖片文件的大小，提高頁面加載速度，減少網(wǎng)絡帶寬消耗，以及改善用戶體驗。我們將通過以下幾個步驟來實現(xiàn)這一功能：
1. HTML 文件設置
首先，我們需要在 HTML 文件中設置一個文件選擇框和一個觸發(fā)壓縮的按鈕：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片壓縮</title>
<style>
img {
margin-left: 20px;
max-width: 100px;
}
</style>
</head>
<body>
<!-- 文件選擇框 -->
<input type="file" id="fileInput" accept="image/*"/>
<!-- 觸發(fā)壓縮的按鈕 -->
<button class="compressButton">開始壓縮</button>
<script>
// JavaScript 代碼將在下文中介紹
</script>
</body>
</html>
2. JavaScript 實現(xiàn)圖片壓縮
2.1 獲取 Base64 圖片大小
我們首先定義一個函數(shù) getBase64ImageSize，用于獲取 Base64 格式圖片的大小。
javascriptCopy code
// 獲取 base64 圖片的大小
const getBase64ImageSize = (base64String) => {
// 計算 base64 字符串的長度
constlen = base64String.length;
// 每個 base64 字符所占用的字節(jié)數(shù)，Base64 編碼中每個字符占用 6 位，即 3 字節(jié)
const bytes = len * 0.75;
// 轉(zhuǎn)換為 KB
const sizeInKB = bytes / 1024;
// 返回圖片大小，保留兩位小數(shù)
return sizeInKB.toFixed(2);
}
2.2 讀取文件并顯示原始圖片
我們接著定義一個函數(shù) displayOriginalImage，用于讀取用戶選擇的圖片文件并在頁面上顯示原始圖片。
// 顯示原始圖片
const displayOriginalImage = (file) => {
if (!file) {
alert('請選擇圖片');
return;
}
const reader = new FileReader();
reader.onload = () => {
const div = document.createElement('div');
const img = document.createElement('img');
const span = document.createElement('span');
img.src = reader.result;
span.innerText = `原圖大?。?span style="margin: 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(224, 108, 117); line-height: 26px;">${getBase64ImageSize(reader.result)}KB`;
div.appendChild(img);
div.appendChild(span)
document.body.appendChild(div);
}
reader.readAsDataURL(file);
}
image.png
2.3 壓縮圖片
接下來，我們定義一個函數(shù) compressImage，用于壓縮圖片。
// 壓縮圖片
const compressImage = (file, quality = 0.8, success) => {
const reader = new FileReader();
// 讀取文件后的回調(diào)函數(shù)
reader.onload = () => {
const img = new Image();
img.onload = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 設置 canvas 的大小
canvas.width = img.width;
canvas.height = img.height;
// 在 canvas 上繪制圖片
ctx.drawImage(img, 0, 0, img.width, img.height);
// 將 canvas 上的圖像數(shù)據(jù)壓縮為 base64 格式
const compressedDataURL = canvas.toDataURL('image/jpeg', quality);
// 調(diào)用成功回調(diào)函數(shù)，并傳遞壓縮后的圖片數(shù)據(jù)
success && success(compressedDataURL);
}
// 加載圖片
img.src = reader.result;
}
// 讀取文件為 DataURL
reader.readAsDataURL(file);
}
這個函數(shù)接受三個參數(shù)：文件對象 file、壓縮質(zhì)量 quality（默認為 0.8）、成功回調(diào)函數(shù) success。在函數(shù)內(nèi)部，我們使用 FileReader 對象讀取文件，然后在加載圖片完成后，將其繪制到 canvas 上，并通過 toDataURL 方法將 canvas 上的圖像數(shù)據(jù)壓縮為 base64 格式。最后，調(diào)用成功回調(diào)函數(shù)，并傳遞壓縮后的圖片數(shù)據(jù)。
2.4 觸發(fā)壓縮操作
最后，我們?yōu)閴嚎s按鈕添加事件監(jiān)聽，觸發(fā)壓縮圖片操作。
// 當點擊按鈕時觸發(fā)壓縮圖片操作
compressButton.addEventListener('click', () => {
const file = fileInput.files[0];
compressImage(file, 0.8, (imgBase64) => {
const div = document.createElement('div');
const img = document.createElement('img');
const span = document.createElement('span');
img.src = imgBase64;
span.innerText = `壓縮后大小：${getBase64ImageSize(imgBase64)}KB`;
div.appendChild(img);
div.appendChild(span)
document.body.appendChild(div);
});
});
image.png
結(jié)語
通過本文的學習，我們了解了如何通過 JavaScript 實現(xiàn)前端圖片壓縮功能。通過壓縮圖片，我們可以在保證圖片質(zhì)量的前提下，減小圖片文件的大小，提高網(wǎng)頁加載速度，提升用戶體驗。這種技術(shù)在實際項目中具有很大的實用價值，希望本文對你有所幫助。
該文章在 2024/3/21 15:47:39 編輯過
400 186 1886
