前端JS图片压缩的奥秘：轻松减小图像尺寸，优化网站性能！

前端

2024-02-07 15:36:29

压缩图像释放网站活力，提升用户体验！

图像压缩，提升网站性能的利器！

图像作为网页内容的重要组成部分，往往占据了大量的页面空间，影响网站加载速度和用户体验。而图片压缩，则可以通过减少图像文件的大小，加快网页加载速度，改善用户体验。

揭秘压缩之道：有损与无损压缩

图片压缩算法多种多样，每种算法都有其独特的优势和劣势。两种最常用的压缩算法分别是：

有损压缩： 显著减小图像文件的大小，但会牺牲图像质量，适用于压缩照片和其他视觉元素。
无损压缩： 减小图像文件的大小，而不会影响图像质量，适用于压缩文本和其他重要信息。

前端JS图像压缩实战指南

接下来，我们将结合代码实例，演示如何使用前端JS实现图片压缩。

步骤一：获取图片文件

const input = document.querySelector('input[type="file"]');

input.addEventListener('change', (e) => {
  const file = e.target.files[0];

  // 继续处理文件...
});

步骤二：转换成Base64格式

const reader = new FileReader();

reader.onload = () => {
  const base64 = reader.result;

  // 继续处理base64数据...
};

reader.readAsDataURL(file);

步骤三：利用Canvas压缩图片

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

const image = new Image();
image.onload = () => {
  canvas.width = image.width;
  canvas.height = image.height;

  ctx.drawImage(image, 0, 0);

  // 设置压缩质量
  const quality = 0.5;
  canvas.toDataURL('image/jpeg', quality);

  // 继续处理压缩后的图像数据...
};

image.src = base64;