從載入中創建縮略圖

我很新，所以請耐心等待！我使用了另一個腳本，在用戶選擇瀏覽按鈕並選擇圖像後，在瀏覽器中顯示一個小50像素的縮略圖圖像。從載入中創建縮略圖

形式樣子的HTML：

<input type='file' onchange="readURL(this);" /> 
<img id="blah" src="http://openglobaldirectory.com/images/default_profile.gif" width="50" alt="your image" />

和我有一個JavaScript函數，看起來像：

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
      $('#blah') 
       .attr('src', e.target.result) 
       .width(50) 
       .height(50); 
     }; 
     reader.readAsDataURL(input.files[0]); 
    } 
}

當用戶從文件中選擇圖像的50x50px縮略圖顯示在然而，頁面會壓縮整個圖像，除非選擇的圖像是正方形（或幾乎正方形），否則生成的縮略圖看起來非常失真。

我想要做的是創建一個更清晰的縮略圖，不會顯示失真或壓縮的圖像，無論原始大小如何。我認爲需要做的事情是首先將圖像的高度降低到50px，然後根據中間的50px圖像縮略圖。

有沒有人知道一種方法來做到這一點？

順便說一下我下面作爲一個例子原始腳本可以在這裏找到：HTML - Display image after selecting filename

來源

2013-10-30 John Benesh

將設置只是寬度50像素的工作....高度會自動調整 –

如果不看這個鏈接http://stackoverflow.com/questions/493296/css-display-an-image-調整大小和裁剪 –

如果你知道你所有的圖片都被「縮小」（即它們都至少有一個尺寸大於50像素時），你可以刪除img標籤寬度屬性，並把這個img標籤內：

style='max-width:50px; max-height:50px;'

如果要覆蓋所有的情況下，你可以修改你的JavaScript使它集圖像大小是如果大它需要更大才能填寫您的縮略圖空間。

function readURL(input) { 

    var imageSize = 50; 

    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function (e) { 

      var blah = $('#blah'); 
      blah.attr('src', e.target.result); 

      var height = blah.height(); 
      var width = blah.width(); 

      if (height < imageSize && width < imageSize) { 
       if (width > height) { 
        blah.width(imageSize); 
       } 
       else { 
        blah.height(imageSize) 
       } 
      } 
     }; 
     reader.readAsDataURL(input.files[0]); 
    } 
}

來源

2013-10-30 02:48:55 Scampbell

從載入中創建縮略圖

回答

相關問題