画像を入力から拡大縮小

Question

希望の結果：ファイルアップロードフォームから画像を選択し、サムネイルに拡大縮小して表示します。

問題：以下のコードは私が望むものと全く同じですが、ファイルを一度ではなく、画像プレビューを表示するために2回選択する必要があります。 （画像を選択する、表示しない、同じ画像を選択する、縮尺を変更する）手動で幅を&の高さに割り当てると、すべてがうまくいきました。私はコードレビューが必要です！ if/if else/else文をコメントアウトして手動でimg.width & img.heightをそれぞれ75に割り当てると、縮尺は変わりませんが、私はディスプレイを取得します。

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); 
}; 

私は少しスケーリングを変更している - この記事次https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/を試してみましたが、私は同じ問題を持っています。私はキャンバスを使用していないという事実のために問題はありますか？私はかなり新しいw/jQueryです& javascript - ここで何か助けをいただければ幸いです！

Answer 1

画像を取得するこのスニペットをサムネイルにしました&は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>