Resimden ölçekleme [type = dosya]

Question

İstenen Sonuç: Bir dosya yükleme formundan bir resim seçmek, küçük resme ölçeklemek ve görüntülemek için arıyorum.

Sorun: Aşağıdaki kod tam olarak istediğim şeyi yapar, ancak dosyayı bir kez değil, resim önizlemesini görmek için iki kez seçmem gerekir. (Görüntü seç, ekran yok, aynı görüntüyü seç, ölçeklendirilmiş ekrana sahip olurum) Her şey el ile & yüksekliğini manuel olarak atadığımda harika çalışıyordu, ancak şimdi ölçeklendiriyordum - bu sorun başladı. Bir kod incelemesine ihtiyacım var! If/if else/else ifadesini açıkladığımda ve img.width & img.height değerini manuel olarak atadığımda, her ikisi de 75 olacak şekilde ekrana bakıyorum. Bu makaleyi takip https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/ çalıştı ve ben aynı sorun var -

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

Biraz ölçeklendirme kadar değişen var. Sorun, tuval kullanmıyorum gerçeğinden kaynaklanıyor mu? Ben çok yeni w/jQuery & javascript - Burada herhangi bir yardım büyük takdir!

Answer 1

Resim çeken bu pasajı oluşturdum, & görüntüyü küçük resim olarak dışa aktarıyor.

// 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>