js压缩图片到指定大小

你可以使用JavaScript中的canvas来压缩图片，通过指定目标图片的宽高和大小，来达到压缩图片的目的。以下是一个简单的实现：

function compressImage(file, maxWidth, maxHeight, quality, callback) {
  let reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function(event) {
    let img = new Image();
    img.src = event.target.result;
    img.onload = function() {
      let canvas = document.createElement('canvas');
      let ctx = canvas.getContext('2d');
      let width = img.width;
      let height = img.height;
      if (width > height) {
        if (width > maxWidth) {
          height *= maxWidth / width;
          width = maxWidth;
        }
      } else {
        if (height > maxHeight) {
          width *= maxHeight / height;
          height = maxHeight;
        }
      }
      canvas.width = width;
      canvas.height = height;
      ctx.drawImage(img, 0, 0, width, height);
      canvas.toBlob(function(blob) {
        callback(blob);
      }, file.type, quality);
    }
  }
}

这个函数接收五个参数：

- `file`：要压缩的图片文件。
- `maxWidth`：目标图片的最大宽度。
- `maxHeight`：目标图片的最大高度。
- `quality`：图片的压缩质量，0-1之间的数字。
- `callback`：压缩后的回调函数，接收一个压缩后的Blob对象。

使用示例：

let fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', function() {
  let file = fileInput.files[0];
  compressImage(file, 800, 800, 0.7, function(blob) {
    // 处理压缩后的图片
  });
});

这个示例将图片压缩到800x800以内，并将压缩质量设置为0.7。你可以根据自己的需求调整这些参数。