Zeige skalierte Base64-Ausgabe eines Bildes

Question

Ich versuche, den folgenden "Monstercode", den ich geschrieben habe, zu erreichen und zu verstehen. Grundsätzlich sollte diese Funktion ausgelöst werden, wenn der Dateieingabedialog (HTML) ausgelöst wurde. Aber der Code geht nur ein paar Zeilen gut. Es lädt das Bild, und dann in der ersten alert() zeigt es mir die base64 des ursprünglichen Bildes, aber dann, später im Code, wenn das eigentliche Bild in einem Canvas geladen werden soll, gibt es (in einem anderen alert()) Höhe , wahrscheinlich, dass das Bild nicht korrekt oder überhaupt nicht geladen wurde.

Die HTML-Eingabeformular (vereinfacht) sieht wie folgt aus:

<input type='File' accept='image/*' onChange='changeBtn(this);' /> 

und die Funktion unter:

function changeBtn(elem) { 
    selfile = document.getElementById(elem.id); 

    if ('files' in selfile) { 
     var file = selfile.files[0]; 
     if ('name' in file) { 
      str1 = file.name; 
     } 
     if ('size' in file) { 
      str1 += ' (' + ((file.size/1024)/1024).toFixed(2) + 'MB)'; 
     } 
     document.getElementById("label_" + elem.id).innerHTML = str1; 

     var FR= new FileReader(); 
     var img = document.createElement("img"); 
     FR.onload = function(e) { 
      img.src = e.target.result; 
      alert(e.target.result); // Returns B64 of the original image 
     }; 

     FR.readAsDataURL(file); 

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

     var MAX_WIDTH = 800; 
     var MAX_HEIGHT = 600; 
     var width = img.width; 
     var height = img.height; 
     alert(height); // Returns 0 

     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"); 
     alert(dataurl); // Returns only "data; " and nothing more 

    } 
} 

Vielen Dank im Voraus für jede Hilfe. Scheint ziemlich einfach, aber ich verstehe es nicht. Ich habe den Code mindestens 3 mal umgeschrieben, aber ich bekomme immer das gleiche Ergebnis.

Answer 1

Ich habe es herausgefunden! Ich rief FR.readAsDataURL(file); vor dem Laden des Bildes in es, so dass es eine undefinierte Datei laden.

Wenn wir folgenden Code suchen, die versagt hat:

var FR= new FileReader(); 
var img = document.createElement("img"); 
FR.onload = function(e) { 
    img.src = e.target.result; 
    alert(e.target.result); // Returns B64 of the original image 
}; 
FR.readAsDataURL(file); 

wir jetzt wissen, warum. Zuerst wird var FR= new FileReader(); aufgerufen, dann FR.readAsDataURL(file); und dann, wenn der Onload ausgelöst wird: img.src = e.target.result;. Das ist die falsche Reihenfolge. Die richtige Reihenfolge ist:

function changeBtn(elem) { 
    selfile = document.getElementById(elem.id); 

    if ('files' in selfile) { 
     var file = selfile.files[0]; 
     if ('name' in file) { 
      str1 = file.name; 
     } 
     if ('size' in file) { 
      str1 += ' (' + ((file.size/1024)/1024).toFixed(2) + 'MB)'; 
     } 
     document.getElementById("label_" + elem.id).innerHTML = str1; 

     var FR= new FileReader(); 

     FR.readAsDataURL(file); 

     var img = document.createElement("img"); 
     FR.onload = function(e) { 
      img.src = e.target.result; 
      alert(e.target.result); 

      var canvas = document.createElement('canvas'); 
      var ctx = canvas.getContext("2d"); 

      ctx.drawImage(img, 0, 0); 

      var MAX_WIDTH = 800; 
      var MAX_HEIGHT = 600; 
      var width = img.width; 
      var height = img.height; 
      alert(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"); 
      alert(dataurl); 
     }; 
    } 
}