使用HTML5进行图片压缩上传的最佳方法是什么？

HTML5提供了File API，可以使用JavaScript在客户端对图片进行压缩和裁剪，然后将压缩后的图片上传到服务器。以下是压缩上传图片的简单示例：

HTML：

<input type="file" id="input" />

JavaScript：

// 获取文件输入框
var input = document.getElementById("input");

// 监听文件上传事件
input.addEventListener("change", function () {
  // 获取文件
  var file = input.files[0];
  
  // 创建文件读取器
  var reader = new FileReader();

  // 读取文件并压缩
  reader.onload = function (e) {
    var img = new Image();
    img.onload = function () {
      // 创建canvas
      var canvas = document.createElement("canvas");
      var ctx = canvas.getContext("2d");

      // 获取图片原始大小
      var width = img.width;
      var height = img.height;

      // 获取压缩比例
      var ratio = 1.0;
      if (width > 800 || height > 800) {
        ratio = Math.max(width / 800, height / 800);
      }

      // 计算压缩后的宽度和高度
      var targetWidth = width / ratio;
      var targetHeight = height / ratio;

      // 设置canvas大小，并绘制图片
      canvas.width = targetWidth;
      canvas.height = targetHeight;
      ctx.drawImage(img, 0, 0, targetWidth, targetHeight);

      // 将canvas转成Blob对象
      canvas.toBlob(function (blob) {
        // 创建表单数据，并添加Blob数据
        var formData = new FormData();
        formData.append("file", blob);

        // 创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();

        // 监听上传过程
        xhr.upload.addEventListener("progress", function (event) {
          if (event.lengthComputable) {
            var percentComplete = event.loaded / event.total * 100;
            console.log(percentComplete + "%");
          }
        }, false);

        // 监听完成事件
        xhr.addEventListener("load", function (event) {
          console.log("上传完成");
        }, false);

        // 监听错误事件
        xhr.addEventListener("error", function (event) {
          console.log("上传出错");
        }, false);

        // 发送请求
        xhr.open("POST", "upload.php");
        xhr.send(formData);
      });
    };

    // 加载图片
    img.src = e.target.result;
  };

  // 读取文件
  reader.readAsDataURL(file);
});

这段代码会监听文件上传事件，读取文件并压缩，然后将压缩后的图片作为Blob对象上传到服务器。在实际使用中，需要根据实际需求进行调整和完善。