JavaScript。上传前旋转图像

Question

我正在尝试在发送图片之前在客户端浏览器上用 javascript 调整图片大小，以便节省带宽。代码运行良好，唯一的异常(exception)是从文件中读取 EXIF 的部分。我相信问题出在函数 var exif = EXIF.readFromBinaryFile(new BinaryFile(e.target.result));

有人可以帮助我让它工作吗？

这是我的代码:

<script type="text/javascript" src="js/exif.js"></script>
<script type="text/javascript">

  function doUpload() {
    var file = document.getElementById('fileToUpload').files[0];
    var dataUrl = "";
    var img = document.createElement("img");
    var reader = new FileReader();
    reader.onload = function(e)
    {
      img.src = e.target.result;

      var canvas = document.createElement("canvas");
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0);

      reader.onloadend = function (e) {
        var exif = EXIF.readFromBinaryFile(new BinaryFile(e.target.result));
        switch(exif.Orientation){

          case 2:
            // horizontal flip
            ctx.translate(canvas.width, 0);
            ctx.scale(-1, 1);
            break;
          case 3:
            // 180° rotate left
            ctx.translate(canvas.width, canvas.height);
            ctx.rotate(Math.PI);
            break;
          case 4:
            // vertical flip
            ctx.translate(0, canvas.height);
            ctx.scale(1, -1);
            break;
          case 5:
            // vertical flip + 90 rotate right
            ctx.rotate(0.5 * Math.PI);
            ctx.scale(1, -1);
            break;
          case 6:
            // 90° rotate right
            ctx.rotate(0.5 * Math.PI);
            ctx.translate(0, -canvas.height);
            break;
          case 7:
            // horizontal flip + 90 rotate right
            ctx.rotate(0.5 * Math.PI);
            ctx.translate(canvas.width, -canvas.height);
            ctx.scale(-1, 1);
            break;
          case 8:
            // 90° rotate left
            ctx.rotate(-0.5 * Math.PI);
            ctx.translate(-canvas.width, 0);
            break;}

      }


      // Set Width and Height
      var MAX_WIDTH = 1024;
      var MAX_HEIGHT = 1024;
      var width = img.width;
      var height = img.height;

      if (width > height) {
        if (width > MAX_WIDTH) {
          height *= MAX_WIDTH / width;
          width = MAX_WIDTH;
        }
      } else {
        if (height > MAX_HEIGHT) {
          width *= MAX_HEIGHT / height;
          height = MAX_HEIGHT;
        }
      }
      canvas.width = width;
      canvas.height = height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, width, height);

      dataUrl = canvas.toDataURL("image/jpeg");
      document.getElementById('image_preview').src = dataUrl;    

      // Post the data
      var fd = new FormData();
      fd.append("image", dataUrl);

      var xhr = new XMLHttpRequest();
      xhr.upload.addEventListener("progress", uploadProgress, false);
      //xhr.addEventListener("load", uploadComplete, false);
      xhr.addEventListener("error", uploadFailed, false);
      xhr.addEventListener("abort", uploadCanceled, false);
      xhr.open("POST", "uploadPicture.php");
      xhr.send(fd);

    }
    // Load files into file reader
    reader.readAsDataURL(file);
  }

  function uploadProgress(evt) {
    if (evt.lengthComputable) {
      var percentComplete = Math.round(evt.loaded * 100 / evt.total);
      document.getElementById('progress').innerHTML = percentComplete.toString() + '%';
    } else {
      document.getElementById('progress').innerHTML = 'Upload error!';
    }
  }


  function uploadComplete(evt) {
    alert(evt.target.responseText);
  }

  function uploadFailed(evt) {
    alert("Error on file upload!");
  }

  function uploadCanceled(evt) {
    alert("Upload aborted or network error!");
  }
</script>

Answer 1

您的 reader.onloadend 是异步的，并且在逻辑中间松散。在继续绘制图像之前等待它被触发。