使用javascript上传、调整图像大小并将图像发送到服务器

// HTML部分
<input type="file" id="imageInput">
<button onclick="uploadImage()">上传图像</button>

// JavaScript部分
function uploadImage() {
  var input = document.getElementById('imageInput');
  var file = input.files[0];

  if (file) {
    var reader = new FileReader();
    reader.onload = function(e) {
      var img = new Image();
      img.onload = function() {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = 200; // 调整图像宽度为200像素
        canvas.height = img.height * (canvas.width / img.width);
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        var resizedDataUrl = canvas.toDataURL('image/jpeg', 0.8); // 将调整大小后的图像转为JPEG数据URL

        // 发送图像数据到服务器
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/upload', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onreadystatechange = function() {
          if (xhr.readyState === 4 && xhr.status === 200) {
            console.log('图像上传成功！');
          }
        };
        xhr.send('imageData=' + encodeURIComponent(resizedDataUrl));
      };
      img.src = e.target.result;
    };
    reader.readAsDataURL(file);
  }
}