Bild von der Eingabe skalieren [Typ = Datei]

Question

Gewünschtes Ergebnis: Ich suche ein Bild aus einem Datei-Upload-Formular, skaliere es auf ein Thumbnail und zeige es an.

Problem: Der folgende Code tut genau das, was ich will, aber ich muss die Datei nicht einmal, sondern zweimal auswählen, um die Bildvorschau zu sehen. (Wählen Sie Bild, keine Anzeige, wählen Sie das gleiche Bild, ich bekomme die skalierte Anzeige) Alles funktionierte gut, als ich die Breite & Höhe manuell zuweisen, obwohl jetzt, wo ich es skaliere - dieses Problem begann. Ich brauche einen Code-Review! Wenn ich die if/if else/else-Anweisung auskommentiere und img.width manuell widme & img.height zu 75 je, bekomme ich die Anzeige, obwohl es natürlich nicht skaliert ist.

previewFiles = function (file, i) { 

    preview = function (file) { 

     // Make sure `file.name` matches our extensions criteria 
     switch (/\.(jpe?g|png|gif)$/i.test(file.name)) { 
      case true: 
       var reader = new FileReader(); 
       reader.onload = function (e) { 
        var img = new Image(); 
        img.src = reader.result; 
        var width = img.width, 
          height = img.height, 
          max_size = 75; 

        if (width <= max_size && height <= max_size) { 
         var ratio = 1; 
        } else if (width > height) { 
         var ratio = max_size/width; 
        } else { 
         var ratio = max_size/height; 
        } 

        img.width = Math.round(width * ratio); 
        img.height = Math.round(height * ratio); 
        img.title = file.type; 
        $('div.box.box-primary').find('span.prev').eq(i).append(img); 
       }; 
       reader.readAsDataURL(file); 
       break; 
      default: 
       $('div.box.box-primary').find('span.prev').eq(i).append('<a class="btn btn-app" href="#"><span class="vl vl-bell-o"></span> Unsupported File</a>'); 
       break; 
     } 
    }; 
    preview(file); 
}; 

Ich habe die Änderung der Skalierung ein wenig nach oben - versucht https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/ diesem Artikel nach, und ich habe das gleiche Problem. Liegt das Problem daran, dass ich keine Leinwand verwende? Ich bin ziemlich neu w/jQuery & Javascript - Jede Hilfe hier wird sehr geschätzt!

Answer 1

Ich machte dieses Schnipsel, das ein Bild, Miniaturansichten es & erhält exportiert es als ein Element img.

// limit the image to 150x100 maximum size 
 
var maxW=150; 
 
var maxH=100; 
 

 
var input = document.getElementById('input'); 
 
input.addEventListener('change', handleFiles); 
 

 
function handleFiles(e) { 
 
    var img = new Image; 
 
    img.onload = function() { 
 
     var canvas=document.createElement("canvas"); 
 
     var ctx=canvas.getContext("2d"); 
 
     var iw=img.width; 
 
     var ih=img.height; 
 
     var scale=Math.min((maxW/iw),(maxH/ih)); 
 
     var iwScaled=iw*scale; 
 
     var ihScaled=ih*scale; 
 
     canvas.width=iwScaled; 
 
     canvas.height=ihScaled; 
 
     ctx.drawImage(img,0,0,iwScaled,ihScaled); 
 
     var thumb=new Image(); 
 
     thumb.src=canvas.toDataURL(); 
 
     document.body.appendChild(thumb); 
 
    } 
 
    img.src = URL.createObjectURL(e.target.files[0]); 
 
}

body{ background-color: ivory; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>Select a file to create a thumbnail from</h4> 
 
<input type="file" id="input"/> 
 
<br>