前端图片压缩实现指南
简介
在本文中，我们将探讨如何通过 JavaScript 实现前端图片压缩功能。通过压缩图片，我们可以降低图片文件的大小，提高页面加载速度，减少网络带宽消耗，以及改善用户体验。我们将通过以下几个步骤来实现这一功能：
- 创建一个 HTML 文件，设置文件选择框和触发压缩的按钮。
- 使用 JavaScript 读取用户选择的图片文件，并在页面上显示原始图片。
- 编写 JavaScript 函数，对原始图片进行压缩处理。
- 将压缩后的图片显示在页面上，并提供压缩前后图片大小的比较。
1. HTML 文件设置
首先，我们需要在 HTML 文件中设置一个文件选择框和一个触发压缩的按钮：
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>图片压缩</title>
6 <style>
7 img {
8 max-width: 200px;
9 margin-right: 10px;
10 margin-top: 20px;
11 }
12 </style>
13</head>
14<body>
15<!-- 文件选择框 -->
16<input type="file" id="fileInput" accept="image/*"/>
17<!-- 触发压缩的按钮 -->
18<button class="compressButton">开始压缩</button>
19
20<script>
21 // JavaScript 代码将在下文中介绍
22</script>
23</body>
24</html>
25
2. JavaScript 实现图片压缩
2.1 ### 获取 Base64 图片大小
我们首先定义一个函数 getBase64ImageSize，用于获取 Base64 格式图片的大小。
1// 获取 base64 图片的大小
2const getBase64ImageSize = (base64String) => {
3 // 计算 base64 字符串的长度
4 const len = base64String.length;
5 // 每个 base64 字符所占用的字节数，Base64 编码中每个字符占用 6 位，即 3 字节
6 const bytes = len * 0.75;
7 // 转换为 KB
8 const sizeInKB = bytes / 1024;
9 // 返回图片大小，保留两位小数
10 return sizeInKB.toFixed(2);
11}
12
2.2 读取文件并显示原始图片
1// 显示原始图片
2const displayOriginalImage = (file) => {
3 if (!file) {
4 alert('请选择图片');
5 return;
6 }
7
8 const reader = new FileReader();
9 reader.onload = () => {
10 const div = document.createElement('div');
11 const img = document.createElement('img');
12 const span = document.createElement('span');
13 img.src = reader.result;
14 span.innerText = `原图大小：${getBase64ImageSize(reader.result)}KB`;
15
16 div.appendChild(img);
17 div.appendChild(span)
18 document.body.appendChild(div);
19 }
20 reader.readAsDataURL(file);
21}
22
23// 绑定文件选择事件
24fileInput.addEventListener('change', () => {
25 const file = fileInput.files[0];
26 displayOriginalImage(file);
27})
28
````
markdownCopy code
前端图片压缩实现指南
简介
在本文中，我们将探讨如何通过 JavaScript 实现前端图片压缩功能。通过压缩图片，我们可以降低图片文件的大小，提高页面加载速度，减少网络带宽消耗，以及改善用户体验。我们将通过以下几个步骤来实现这一功能：
1. HTML 文件设置
首先，我们需要在 HTML 文件中设置一个文件选择框和一个触发压缩的按钮：
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>图片压缩</title>
6 <style>
7 img {
8 margin-left: 20px;
9 max-width: 100px;
10 }
11 </style>
12</head>
13<body>
14<!-- 文件选择框 -->
15<input type="file" id="fileInput" accept="image/*"/>
16<!-- 触发压缩的按钮 -->
17<button class="compressButton">开始压缩</button>
18
19<script>
20 // JavaScript 代码将在下文中介绍
21</script>
22</body>
23</html>
24
2. JavaScript 实现图片压缩
2.1 获取 Base64 图片大小
我们首先定义一个函数 getBase64ImageSize，用于获取 Base64 格式图片的大小。
1javascriptCopy code
2// 获取 base64 图片的大小
3const getBase64ImageSize = (base64String) => {
4 // 计算 base64 字符串的长度
5 const len = base64String.length;
6 // 每个 base64 字符所占用的字节数，Base64 编码中每个字符占用 6 位，即 3 字节
7 const bytes = len * 0.75;
8 // 转换为 KB
9 const sizeInKB = bytes / 1024;
10 // 返回图片大小，保留两位小数
11 return sizeInKB.toFixed(2);
12}
13
2.2 读取文件并显示原始图片
我们接着定义一个函数 displayOriginalImage，用于读取用户选择的图片文件并在页面上显示原始图片。
1// 显示原始图片
2const displayOriginalImage = (file) => {
3 if (!file) {
4 alert('请选择图片');
5 return;
6 }
7
8 const reader = new FileReader();
9 reader.onload = () => {
10 const div = document.createElement('div');
11 const img = document.createElement('img');
12 const span = document.createElement('span');
13 img.src = reader.result;
14 span.innerText = `原图大小：${getBase64ImageSize(reader.result)}KB`;
15
16 div.appendChild(img);
17 div.appendChild(span)
18 document.body.appendChild(div);
19 }
20 reader.readAsDataURL(file);
21}
22
2.3 压缩图片
接下来，我们定义一个函数 compressImage，用于压缩图片。
1// 压缩图片
2const compressImage = (file, quality = 0.8, success) => {
3 const reader = new FileReader();
4
5 // 读取文件后的回调函数
6 reader.onload = () => {
7 const img = new Image();
8
9 img.onload = () => {
10 const canvas = document.createElement('canvas');
11 const ctx = canvas.getContext('2d');
12
13 // 设置 canvas 的大小
14 canvas.width = img.width;
15 canvas.height = img.height;
16
17 // 在 canvas 上绘制图片
18 ctx.drawImage(img, 0, 0, img.width, img.height);
19
20 // 将 canvas 上的图像数据压缩为 base64 格式
21 const compressedDataURL = canvas.toDataURL('image/jpeg', quality);
22
23 // 调用成功回调函数，并传递压缩后的图片数据
24 success && success(compressedDataURL);
25 }
26
27 // 加载图片
28 img.src = reader.result;
29 }
30
31 // 读取文件为 DataURL
32 reader.readAsDataURL(file);
33}
34
这个函数接受三个参数：文件对象 file、压缩质量 quality（默认为 0.8）、成功回调函数 success。在函数内部，我们使用 FileReader 对象读取文件，然后在加载图片完成后，将其绘制到 canvas 上，并通过 toDataURL 方法将 canvas 上的图像数据压缩为 base64 格式。最后，调用成功回调函数，并传递压缩后的图片数据。
2.4 触发压缩操作
最后，我们为压缩按钮添加事件监听，触发压缩图片操作。
1// 当点击按钮时触发压缩图片操作
2compressButton.addEventListener('click', () => {
3 const file = fileInput.files[0];
4 compressImage(file, 0.8, (imgBase64) => {
5 const div = document.createElement('div');
6 const img = document.createElement('img');
7 const span = document.createElement('span');
8 img.src = imgBase64;
9 span.innerText = `压缩后大小：${getBase64ImageSize(imgBase64)}KB`;
10
11 div.appendChild(img);
12 div.appendChild(span)
13 document.body.appendChild(div);
14 });
15});
16
结语
通过本文的学习，我们了解了如何通过 JavaScript 实现前端图片压缩功能。通过压缩图片，我们可以在保证图片质量的前提下，减小图片文件的大小，提高网页加载速度，提升用户体验。这种技术在实际项目中具有很大的实用价值，希望本文对你有所帮助。
相关笔记