Javascript Größe Bild vor dem Upload ändern - lesen von Leinwand - Bild dort, Breite und Höhe 0

Question

Ich versuche derzeit, Bilder vor dem Upload Größe zu ändern und dies zu erreichen, ich verwende JS/Jquery, muss Client-Seite sein. Auf meinem Server leugne ich einfach alle Anfragen, die größer als 30MB sind.

Ich verwende diesen Code:

$("input[type='file']").change(function() { 

     console.log("function works"); 

     // from an input element 
     var filesToUpload = this.files; 
     console.log(filesToUpload); 

     var img = document.createElement("img"); 
     img.src = window.URL.createObjectURL(this.files[0]); 

     console.log("image: ", img); 
     console.log("the image is: ", img.width); 

     var MAX_WIDTH = 800; 
     var MAX_HEIGHT = 600; 
     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 = $("#uploading_canvas").get(0);; 

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

     var dataurl = canvas[0].toDataURL("image/png"); 

     //var file = canvas.mozGetAsFile("foo.png"); 
    }); 

Die erste console.log Ausgabe zeigt, dass das Bild da, aber irgendwie hat es keine Breite oder Höhe. Das Hochladen eines Bildes mit diesem Code ändert nichts an atm.

Hier sind die Konsole Logausgaben:

DataToUrl ist nicht definiert, da das Bild fehlt?

Answer 1

Wie @ymz in den Kommentaren erklärt das Bild braucht Zeit zum Laden, so wickelte das Einbinden des bildbezogenen Codes in eine zusätzliche Onload-Funktion das Problem.

Die Lösung sieht wie folgt aus:

 $(img).load(function() { 

      canvas = $("#uploading_canvas").get(0); 


      var MAX_WIDTH = 600; 
      var MAX_HEIGHT = 450; 
      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); 

      var dataurl = canvas.toDataURL("image/png"); 

     });