js imageConversion上传时压缩图片

在上传图片时压缩图片可以使用类似上面的方法，不过需要在压缩完成后将压缩后的图片数据上传到服务器。以下是一个示例：

// 选择要上传的图片文件
let input = document.querySelector('input[type="file"]');

// 当文件选择时
input.addEventListener('change', function () {
  // 读取文件并转换为base64格式
  let reader = new FileReader();
  reader.readAsDataURL(input.files[0]);

  // 当文件读取完成时
  reader.onload = function () {
    // 创建一个Image对象
    let img = new Image();

    // 当Image对象加载完成时
    img.onload = function () {
      // 创建一个canvas元素
      let canvas = document.createElement('canvas');

      // 设置canvas元素的宽度和高度
      canvas.width = img.width;
      canvas.height = img.height;

      // 获取canvas元素的上下文对象
      let ctx = canvas.getContext('2d');

      // 将图片绘制到canvas上
      ctx.drawImage(img, 0, 0);

      // 将canvas转换为base64格式的图片数据
      let base64 = canvas.toDataURL('image/jpeg', 0.8);

      // 将压缩后的图片数据上传到服务器
      let 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) {
          // 上传成功后的处理
        }
      };
      xhr.send('image=' + encodeURIComponent(base64));
    };

    // 加载Image对象
    img.src = reader.result;
  };
});

在这个示例中，我们在压缩完成后使用XMLHttpRequest对象将压缩后的图片数据发送到服务器。你可以根据实际情况来调整发送方式和服务器端的处理逻辑。