图片瘦身术：用纯前端实现图片压缩工具

2023-09-26 15:31:42

网页上的图片对于提升用户体验非常重要，但是大尺寸的图片也会增加网页的加载时间，影响用户体验。因此，对图片进行压缩是优化网页性能的重要手段之一。

纯前端图片压缩工具可以帮助你快速压缩图片，而无需借助第三方工具或软件。这种工具通常使用 JavaScript、HTML5 和 Canvas 技术来实现。

JavaScript 负责处理用户交互和数据处理，HTML5 提供了 Canvas 元素，允许你操作图片像素数据，Canvas 元素可以将图片数据转换为ImageData对象，从而可以访问和修改图片的每一个像素。

一旦你对图片数据进行了修改，就可以使用 Blob API 将ImageData对象转换为 Blob 对象，Blob 对象可以表示各种类型的二进制数据，包括图片。最后，使用 URL.createObjectURL() 方法可以将 Blob 对象转换为一个URL，然后就可以在网页上显示压缩后的图片了。

如果需要下载压缩后的图片，可以使用 FileSaver.js 库来将 Blob 对象保存到本地文件中。

下面是使用纯前端技术实现图片压缩工具的步骤：

准备HTML页面

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>图片压缩工具</h1>
  <form>
    <input type="file" accept="image/*" id="image-input">
    <button type="submit">压缩图片</button>
  </form>
  <canvas id="canvas"></canvas>
  <a id="download-link" href="#" download>下载压缩后的图片</a>
</body>
</html>

编写JavaScript代码

// 获取元素
const imageInput = document.getElementById('image-input');
const canvas = document.getElementById('canvas');
const downloadLink = document.getElementById('download-link');

// 监听表单提交事件
imageInput.addEventListener('change', (event) => {
  // 获取选中的图片文件
  const file = event.target.files[0];

  // 创建FileReader对象
  const reader = new FileReader();

  // 监听FileReader对象的load事件
  reader.addEventListener('load', (event) => {
    // 将图片数据转换为ImageData对象
    const imageData = new ImageData(new Uint8ClampedArray(event.target.result), 100, 100);

    // 使用Canvas对象绘制图片
    const ctx = canvas.getContext('2d');
    ctx.putImageData(imageData, 0, 0);

    // 获取压缩后的图片数据
    const compressedImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

    // 将压缩后的图片数据转换为Blob对象
    const blob = new Blob([compressedImageData.data], { type: 'image/jpeg' });

    // 将Blob对象转换为URL
    const url = URL.createObjectURL(blob);

    // 将URL设置为下载链接的href属性
    downloadLink.href = url;

    // 显示下载链接
    downloadLink.style.display = 'block';
  });

  // 读取图片文件
  reader.readAsDataURL(file);
});