如何使用html5进行图片压缩上传？

HTML5 本身并不能直接压缩图片。你需要结合 JavaScript 来实现图片压缩上传。以下列出几种常用的方法：

1. 使用 canvas 元素: 这是最常用的前端图片压缩方法。基本思路是将图片绘制到 canvas 上，然后使用 canvas.toDataURL() 方法导出压缩后的图片数据。

function compressImage(imageFile, quality) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(imageFile);
    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);
        const compressedDataUrl = canvas.toDataURL('image/jpeg', quality); // quality 值介于 0 和 1 之间
        resolve(compressedDataUrl);
      };
      img.onerror = reject;
    };
    reader.onerror = reject;
  });
}


// 使用示例:
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', async (event) => {
  const file = event.target.files[0];
  const compressedDataUrl = await compressImage(file, 0.7); // 压缩质量为 70%

  // 将压缩后的图片上传到服务器
  fetch('/upload', {
    method: 'POST',
    body: JSON.stringify({ image: compressedDataUrl }),
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(response => {
    // 处理服务器响应
  });

});

2. 使用第三方库: 一些 JavaScript 库可以简化图片压缩的过程，例如：

Compressor.js: 一个轻量级的库，提供简单的 API 进行图片压缩。
browser-image-compression: 功能更强大，支持更多选项，例如调整大小、裁剪等。

示例使用 Compressor.js:

import Compressor from 'compressorjs';

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

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

  new Compressor(file, {
    quality: 0.6, // 压缩质量
    success(result) {
      // result 是压缩后的 File 对象
      const formData = new FormData();
      formData.append('file', result, result.name);

      // 上传到服务器
      fetch('/upload', {
        method: 'POST',
        body: formData
      })
      .then(response => { /* ... */ })
      .catch(error => { /* ... */ });
    },
    error(err) {
      console.log(err.message);
    },
  });
});

关键点:

图片类型: canvas.toDataURL() 支持 image/jpeg 和 image/png 格式。JPEG 压缩率更高，但有损；PNG 压缩率较低，但无损。
质量参数: quality 参数控制压缩级别，值介于 0 和 1 之间。值越小，压缩率越高，但图像质量越低。
服务器端处理: 你需要在服务器端接收并处理上传的图片数据。
Exif 数据: 使用 canvas 方法压缩会丢失图片的 Exif 数据（例如拍摄日期、相机型号等）。如果需要保留 Exif 数据，需要使用其他方法或库。