Javascript. Bild vor dem Upload drehen

Question

Ich versuche ein Bild in Javascript auf dem Client-Browser zu skalieren, bevor ich es sende, damit ich Bandbreite sparen kann. Der Code läuft gut mit der einzigen Ausnahme des Teils, der den EXIF ​​aus der Datei liest. Ich glaube, das Problem ist mit der Funktion var exif = EXIF.readFromBinaryFile(new BinaryFile(e.target.result));

Kann mir jemand helfen, damit es funktioniert?

Hier ist mein Code:

<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

Ihre reader.onloadend sind asynchrone und ist in der Mitte der Logik verlieren. warte darauf, dass es ausgelöst wird, bevor du zu drawImage gehst.