写一个前端页面，功能为压缩图片体积

好的，我可以为您提供一些思路和建议。

首先，您可以使用 JavaScript 中的 canvas API 来进行图片压缩。以下是一个简单的压缩图片的函数：

function compressImage(file, quality) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = event => {
      const img = new Image();
      img.src = event.target.result;
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        canvas.width = img.width;
        canvas.height = img.height;

        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

        canvas.toBlob(blob => {
          resolve(blob);
        }, file.type, quality);
      };
      img.onerror = error => {
        reject(error);
      };
    };
  });
}

此函数将文件对象作为参数传递，并返回一个 Promise 对象，该对象将解析为压缩后的 Blob 对象，您可以将其用作表单数据的值或通过 AJAX 请求发送到服务器。

接下来，您可以为用户提供一个简单的 UI，以使他们可以选择文件并选择压缩质量。以下是一个简单的 HTML 和 JavaScript 示例：

<input type="file" id="file-input">
<label for="quality-input">Quality:</label>
<input type="range" id="quality-input" min="0" max="1" step="0.1" value="0.8">
<button id="compress-button">Compress</button>

<script>
  const fileInput = document.getElementById('file-input');
  const qualityInput = document.getElementById('quality-input');
  const compressButton = document.getElementById('compress-button');

  fileInput.addEventListener('change', event => {
    const file = event.target.files[0];
    if (file) {
      compressButton.disabled = false;
    } else {
      compressButton.disabled = true;
    }
  });

  compressButton.addEventListener('click', async () => {
    const file = fileInput.files[0];
    const quality = Number(qualityInput.value);

    compressButton.disabled = true;
    const compressedBlob = await compressImage(file, quality);
    compressButton.disabled = false;

    // TODO: handle compressedBlob
  });
</script>

此代码将文件选择器、质量滑块和压缩按钮绑定到 JavaScript 事件监听器中，并在选择文件后启用压缩按钮。当用户单击“压缩”按钮时，将调用`compressImage`函数并在解析 Promise 后处理压缩 Blob。

最后，您可以使用 CSS 和 HTML 美化您的 UI，以使其更易于使用和更吸引人。

希望这可以为您提供一些有用的信息，如果您有任何疑问或需要更多帮助，请随时问我。