前端图片压缩实现指南

简介

在本文中,我们将探讨如何通过 JavaScript 实现前端图片压缩功能。通过压缩图片,我们可以降低图片文件的大小,提高页面加载速度,减少网络带宽消耗,以及改善用户体验。我们将通过以下几个步骤来实现这一功能:

  1. 创建一个 HTML 文件,设置文件选择框和触发压缩的按钮。
  2. 使用 JavaScript 读取用户选择的图片文件,并在页面上显示原始图片。
  3. 编写 JavaScript 函数,对原始图片进行压缩处理。
  4. 将压缩后的图片显示在页面上,并提供压缩前后图片大小的比较。

1. HTML 文件设置

首先,我们需要在 HTML 文件中设置一个文件选择框和一个触发压缩的按钮:

html 复制代码
<!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/*"/>
<!-- 触发压缩的按钮 -->
<button class="compressButton">开始压缩</button>

<script>
  // JavaScript 代码将在下文中介绍
</script>
</body>
</html>

2. JavaScript 实现图片压缩

2.1 ### 获取 Base64 图片大小

我们首先定义一个函数 getBase64ImageSize,用于获取 Base64 格式图片的大小。

javascript 复制代码
// 获取 base64 图片的大小
const getBase64ImageSize = (base64String) => {
  // 计算 base64 字符串的长度
  const len = base64String.length;
  // 每个 base64 字符所占用的字节数,Base64 编码中每个字符占用 6 位,即 3 字节
  const bytes = len * 0.75;
  // 转换为 KB
  const sizeInKB = bytes / 1024;
  // 返回图片大小,保留两位小数
  return sizeInKB.toFixed(2);
}

2.2 读取文件并显示原始图片

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);
}

// 绑定文件选择事件
fileInput.addEventListener('change', () => {
  const file = fileInput.files[0];
  displayOriginalImage(file);
})

````

markdownCopy code

前端图片压缩实现指南

简介

在本文中,我们将探讨如何通过 JavaScript 实现前端图片压缩功能。通过压缩图片,我们可以降低图片文件的大小,提高页面加载速度,减少网络带宽消耗,以及改善用户体验。我们将通过以下几个步骤来实现这一功能:

1. HTML 文件设置

首先,我们需要在 HTML 文件中设置一个文件选择框和一个触发压缩的按钮:

html 复制代码
<!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/*"/>
<!-- 触发压缩的按钮 -->
<button class="compressButton">开始压缩</button>

<script>
  // JavaScript 代码将在下文中介绍
</script>
</body>
</html>

2. JavaScript 实现图片压缩

2.1 获取 Base64 图片大小

我们首先定义一个函数 getBase64ImageSize,用于获取 Base64 格式图片的大小。

go 复制代码
javascriptCopy code
// 获取 base64 图片的大小
const getBase64ImageSize = (base64String) => {
  // 计算 base64 字符串的长度
  const len = base64String.length;
  // 每个 base64 字符所占用的字节数,Base64 编码中每个字符占用 6 位,即 3 字节
  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);
}

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);
  });
});

结语

通过本文的学习,我们了解了如何通过 JavaScript 实现前端图片压缩功能。通过压缩图片,我们可以在保证图片质量的前提下,减小图片文件的大小,提高网页加载速度,提升用户体验。这种技术在实际项目中具有很大的实用价值,希望本文对你有所帮助。

相关推荐
耶啵奶膘1 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^3 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic4 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具5 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
清灵xmf5 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据5 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript
334554326 小时前
element动态表头合并表格
开发语言·javascript·ecmascript