图片压缩

--- theme: channing-cyan --- ## 简介在本文中，我们将探讨如何通过 JavaScript 实现前端图片压缩功能。通过压缩图片，我们可以降低图片文件的大小，提高页面加载速度，减少网络带宽消耗，以及改善用户体验。我们将通过以下几个步骤来实现这一功能： 1. 创建一个 HTML 文件，设置文件选择框和触发压缩的按钮。 2. 使用 JavaScript 读取用户选择的图片文件，并在页面上显示原始图片。 3. 编写 JavaScript 函数，对原始图片进行压缩处理。 4. 将压缩后的图片显示在页面上，并提供压缩前后图片大小的比较。 ## 1. HTML 文件设置首先，我们需要在 HTML 文件中设置一个文件选择框和一个触发压缩的按钮： ```html 图片压缩 ``` ## 2. JavaScript 实现图片压缩 ### 2.1 获取 Base64 图片大小我们首先定义一个函数 `getBase64ImageSize`，用于获取 Base64 格式图片的大小。 ```javascript // 获取 base64 图片的大小 const getBase64ImageSize = (base64String) => { // 计算 base64 字符串的长度 const len = base64String.length; // 每个 base64 字符所占用的字节数，Base64 编码中每个字符占用 6 位，即 3 字节 // - 4 个 Base64 字符 = 3 个原始字节 //- 1 个 Base64 字符 ≈ 0.75 个原始字节（3/4） const bytes = len * 0.75; // 转换为 KB const sizeInKB = bytes / 1024; // 返回图片大小，保留两位小数 return sizeInKB.toFixed(2); } ``` ### 2.2 读取文件并显示原始图片我们接着定义一个函数 `displayOriginalImage`，用于读取用户选择的图片文件并在页面上显示原始图片。 ```javascript // 显示原始图片 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); } ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c9bfc7c49acb4ce4b7a3c527d2394b29~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1036&h=346&s=214693&e=png&b=fefefe) ### 2.3 压缩图片接下来，我们定义一个函数 `compressImage`，用于压缩图片。 ```javascript // 压缩图片 const compressImage = (file, quality = 0.8, success) => { const reader = new FileReader(); // 读取文件后的回调函数 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 上的图像数据压缩为 base64 格式 const compressedDataURL = canvas.toDataURL('image/jpeg', quality); // 调用成功回调函数，并传递压缩后的图片数据 success && success(compressedDataURL); } // 加载图片 img.src = reader.result; } // 读取文件为 DataURL reader.readAsDataURL(file); } ``` 这个函数接受三个参数：文件对象 `file`、压缩质量 `quality`（默认为 0.8）、成功回调函数 `success`。在函数内部，我们使用 FileReader 对象读取文件，然后在加载图片完成后，将其绘制到 canvas 上，并通过 toDataURL 方法将 canvas 上的图像数据压缩为 base64 格式。最后，调用成功回调函数，并传递压缩后的图片数据。 ### 2.4 触发压缩操作最后，我们为压缩按钮添加事件监听，触发压缩图片操作。 ```javascript // 当点击按钮时触发压缩图片操作 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](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c2f4b7a6219d43d494c596949c36c898~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=964&h=656&s=410111&e=png&b=fefefe) ## 结语通过本文的学习，我们了解了如何通过 JavaScript 实现前端图片压缩功能。通过压缩图片，我们可以在保证图片质量的前提下，减小图片文件的大小，提高网页加载速度，提升用户体验。这种技术在实际项目中具有很大的实用价值，希望本文对你有所帮助。