js压缩图片到指定大小

在JavaScript中压缩图片可以使用HTML5的Canvas元素。下面是一个示例代码，可以将图片压缩到指定大小：

function compressImage(file, maxSize, callback) {
  var reader = new FileReader();
  reader.onload = function() {
    var img = new Image();
    img.onload = function() {
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0, img.width, img.height);
      var quality = 1;
      while (canvas.toDataURL('image/jpeg', quality).length > maxSize && quality > 0) {
        quality -= 0.05;
      }
      callback(canvas.toDataURL('image/jpeg', quality));
    };
    img.src = reader.result;
  };
  reader.readAsDataURL(file);
}

这个函数接收三个参数：要压缩的图片文件对象、最大允许的图片大小（单位为字节），以及压缩完成后的回调函数。回调函数中会传入压缩后的图片数据URL。

使用方法：

var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function() {
  var file = this.files[0];
  var maxSize = 1024 * 1024; // 1MB
  compressImage(file, maxSize, function(dataUrl) {
    // 压缩完成后的回调函数
    console.log(dataUrl);
  });
});

其中，`fileInput` 是一个文件选择框的 DOM 元素，用户选择要压缩的图片后会触发 `change` 事件。在事件处理函数中调用 `compressImage` 函数即可开始压缩图片。