Question

所以我想构建一个可以上传图片的网络应用

如何在javascript中调整图像大小？因为我希望它们出现在页面

中

<br />
<input type="file" onchange="showImage(this);" accept="image/png" name="file"/>
<br />
<img id="image" src="../Assets/noimage.png" height="300" width="300"/>
<br />

这是我的javascript代码

if (input.files && input.files[0] && input.files[0].size >= parseFloat('@ViewBag.size')) {
  var reader = new FileReader();
  reader.onload = function (e) {
    $('#image')
    .attr('src', e.target.result)
    .width(300)
    .height(300);
  };
  reader.readAsDataURL(input.files[0]);
}

<img>标记中的宽度和高度设置为300（默认图像

）

在上传图片后，由于javascript的原因，它会设置为300x300 $(#image)属性。

但是，如何使用max-height设置宽度和高度，并自动调整宽度？因为上传的图片可能具有不同的分辨率，并将其设置为300x300会使图片看起来很糟糕。

Answer 1

使用 .css() 并根据需要设置max-height或max-width：

在行动中：

＆＃13;

$('#image')
  .attr('src', 'http://koncha.890m.com/wp-content/uploads/2016/06/2.jpg')
  .css({
    'width': 'auto',
    'height': 'auto',
    'max-height': 300 // your desire number
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" src="../Assets/noimage.png" height="300" width="300" />

＆＃13;

在您的代码中

if (input.files && input.files[0] && input.files[0].size >= parseFloat('@ViewBag.size')) {
  var reader = new FileReader();

  reader.onload = function(e) {
    $('#image')
      .attr('src', e.target.result)
      .css({
        'width': 'auto',
        'height': 'auto',
        'max-height': 300 // your desire number
      });

    reader.readAsDataURL(input.files[0]);
  }

使用javascript属性自动调整图像

1 个答案: