前端 压缩 图片 制定大小 示例

在前端，可以使用canvas对图片进行压缩和调整大小。下面是一个简单的示例：

// 将图片压缩为指定大小
function compressImage(file, maxWidth, maxHeight, quality) {
  var reader = new FileReader();
  reader.onload = function(event) {
    var img = new Image();
    img.onload = function() {
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      var width = img.width;
      var height = img.height;
      if (width > maxWidth) {
        height *= maxWidth / width;
        width = maxWidth;
      }
      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) {
        // 处理压缩后的图片
      }, file.type, quality);
    };
    img.src = event.target.result;
  };
  reader.readAsDataURL(file);
}

使用示例：

<input type="file" onchange="compressImage(this.files[0], 500, 500, 0.8)">

这个示例将选择的图片压缩为最大宽度和高度为500，质量为80%的图片，并将结果以Blob对象的形式传递给回调函数进行处理。