如何調整圖像大小，但保持與JavaScript的比例？

我有一個「文件」輸入和一個函數，由事件「onchange」調用。它做的是調整大小和顯示圖像，但這不完全是我需要的。如何調整圖像大小，但保持與JavaScript的比例？

<input type="file" id="imgUp" accept=".jpg" onchange="readURL(this);" > 

<script type="text/javascript"> 
    function readURL(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
      $('#avatar,#image') 
       .attr('src', e.target.result) 
       .width(70) 
       .height(70); 
      }; 
      reader.readAsDataURL(input.files[0]); 
     } 
    } 
</script>

是否可以調整大小（保持比例）並使用Javascript顯示圖像，而不使用jQuery？

預先感謝您！

來源

2016-08-02 Eduard Climov

變化隱含的高度和寬度聲明來最大高度和最大寬度：

.css('max-width', '70px').css('max-height', '70px');

使用最大高度和最大寬度將其設定應該使用包圍盒，然後將圖像將配合內，在它的原始長寬比。

原生香草JS：

.style.maxWidth = '70px';

.style.maxHeight = '70px';

如果你想從jQuery的移開香草JS（我贊成你這樣做），嘗試this helpful website。

香草轉換爲代碼：

$('#avatar,#image') 
    .attr('src', e.target.result) 
    .width(70) 
    .height(70); 
};

變爲：

var elements = document.querySelectorAll('#avatar,#image'); 
Array.prototype.forEach.call(elements, function(el, i){ 
    el.setAttribute('src', e.target.result); 
    el.style.maxWidth = '70px'; 
    el.style.maxHeight = '70px'; 
});

來源

2016-08-02 09:34:00

要保留寬高比，您只能設置圖像的寬度或高度，而不是設置它們。

下面是一個例子：

$('#avatar,#image').attr('src', e.target.result).width(70);

或者

$('#avatar,#image').attr('src', e.target.result).height(70);

而在香草的Javascript：

var imgs = document.querySelectorAll("#image, #avatar"); 
for(var i = 0; i < imgs.length; i++){ 
    imgs[i].src = e.target.result; 
    imgs[i].width = 70;// or imgs[i].height = 70; 
}

DEMO

來源

2016-08-02 09:24:24 Titus

如何調整圖像大小，但保持與JavaScript的比例？

回答

相關問題