js 图片上传压缩

在前端 JavaScript 中，可以使用 HTML5 的 File API 获取上传的图片文件，然后使用 Canvas 对图片进行压缩处理，最后将压缩后的图片上传至服务器。以下是一个简单的示例代码：

// 获取上传的图片文件
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];

// 创建一个 Image 对象
var img = new Image();

// 加载图片文件
img.onload = function() {
  // 创建 Canvas 元素
  var canvas = document.createElement('canvas');

  // 设置 Canvas 的宽高
  var maxWidth = 800;
  var maxHeight = 800;
  var width = img.width;
  var 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;

  // 在 Canvas 上绘制压缩后的图片
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0, width, height);

  // 将压缩后的图片转换为 Base64 编码的字符串
  var base64 = canvas.toDataURL('image/jpeg', 0.8);

  // 将 Base64 编码的字符串上传至服务器
  // ...
};

// 读取图片文件的内容，并设置 Image 对象的 src 属性
var reader = new FileReader();
reader.onload = function(event) {
  img.src = event.target.result;
};
reader.readAsDataURL(file);

在上述代码中，我们使用 Canvas 对图片进行了压缩处理，并将压缩后的图片转换为 Base64 编码的字符串，然后可以将该字符串上传至服务器。需要注意的是，压缩后的图片质量会有所损失，因此可以根据实际需求调整压缩比例。