JavaScript前端实现压缩图片功能

实现压缩图片功能需要使用 HTML5 中的 File API，以及 Canvas 编程接口。具体步骤如下：

1. HTML 部分：
   首先需要在 HTML 中定义好上传文件的 input 控件和显示压缩后图片的 img 控件。代码如下：

<input type="file" id="fileInput">
<img id="compressImg">

1. JavaScript 部分：
   在获取到上传的文件之后，需要使用 File API 将图片加载到页面上，并使用 Canvas 对图片进行操作。具体代码如下：

const MAX_WIDTH = 800;  // 压缩后图片的最大宽度

const fileInput = document.getElementById('fileInput');
const compressImg = document.getElementById('compressImg');

fileInput.addEventListener('change', () => {
  const file = fileInput.files[0];
  const reader = new FileReader();  // 创建文件读取对象
  reader.readAsDataURL(file);  // 读取文件
  reader.onload = () => {
    const img = new Image();  // 创建图片对象
    img.src = reader.result;  // 设置图片源
    img.onload = () => {
      const canvas = document.createElement('canvas');  // 创建画布
      const ctx = canvas.getContext('2d');
      let w = img.width;  // 图片宽度
      let h = img.height;  // 图片高度
      if (w > MAX_WIDTH) {  // 如果宽度超过最大值则进行压缩
        h = h * MAX_WIDTH / w;
        w = MAX_WIDTH;
      }
      canvas.width = w;  // 设置画布宽度
      canvas.height = h;  // 设置画布高度
      ctx.drawImage(img, 0, 0, w, h);  // 将图片绘制到画布上
      compressImg.src = canvas.toDataURL();  // 设置压缩后图片的源
    };
  };
});

1. 示例说明：
   下面我们通过两个示例来说明如何使用上述代码实现压缩图片功能。

示例 1：
我们已有一个 HTML 文件和一个名为 compress.js 的 JavaScript 文件。首先，将上述 JavaScript 代码复制到 compress.js 文件中。然后在 HTML 文件中引入 compress.js 文件，再在页面中添加上述 HTML 代码。最后打开页面，选择一张图片进行上传，等待压缩后图片显示即可。

示例 2：
我们使用 Vue 框架来实现图片上传和压缩的功能。首先，新建一个名为 ImageUploader.vue 的组件，将上述 HTML 和 JavaScript 代码嵌入其中。然后在父组件中引入 ImageUploader.vue 组件即可使用图片上传和压缩功能。