js压缩图片到指定大小

你可以使用JavaScript中的canvas API来压缩图片。以下是一个简单的示例代码：

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

这个函数接收三个参数：要压缩的图片文件，目标尺寸的最大值，和压缩完成后的回调函数。这个函数会返回一个压缩后的Base64编码的数据URL，你可以把它赋值给一个<img>元素的src属性来显示压缩后的图片。在这个例子中，图片被压缩到70%的质量。你可以根据需要调整这个值。