Question

我有一个＆＃34;文件＆＃34;输入和函数，由事件＆＃34; onchange＆＃34;调用。它的作用是调整大小和显示图像，但它并不完全是我需要的。

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

提前谢谢！

Answer 1

将隐式高度和宽度声明更改为max-height和max-width：

.style.maxWidth = '70px';

使用最大高度和最大宽度设置它应该使用的边界框，然后图像将以其原始宽高比适合其中。

Native vanilla JS：

.style.maxHeight = '70px';

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

如果您想要从jQuery转移到vanilla JS（我为此鼓掌，请尝试this helpful website。

您的代码的Vanilla转换：

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

变为：

{{1}}

Answer 2

要保留纵横比，您只能设置图像的宽度或高度，而不是同时设置它们。

以下是一个例子：

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

或者

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

在vanilla 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

如何调整图像大小，但保持其与javascript的比例？

2 个答案: