Question

我有这个javascript函数，它将输入图像（具有原始大小）预览到输入字段。

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

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }

    $("#imgInp").change(function(){
        readURL(this);
    });
}

以及相关的HTML：

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>

我从这个答案得到了代码：Preview an image before it is uploaded

我的问题是，是否以及如何更改预览图像的分辨率，我只想更改预览图像的分辨率而不是图像本身。

有什么想法吗？

Answer 1

一种替代方法是按drawing that in canvas预览图像。在画布中绘图时，您可以指定自定义分辨率。像这样的东西

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
            var ctx = $('#myCanvas')[0].getContext("2d");
            ctx.drawImage($('#blah')[0], 0, 0, 240, 297);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" style="display:none;" />
    <canvas id="myCanvas" width="240" height="297"></canvas>
</form>

Answer 2

更改你的img并添加宽度和/或高度属性以将分辨率限制为所需的大小，例如：

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" width="300" height="300" /> <!-- Change the width and height accordingly. -->
</form>

Answer 3

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

    reader.onload = function (e) {
      var image = new Image();
      image.src = e.target.result;

      image.onload = function() {
        // access image size here
        var aspectRatio = this.width / this.height,
          thumbWidth = 100,
          thumbHeight = aspectRatio * thumbWidth;

        $('#blah').attr('src', this.src);
        $('#blah').attr('width', thumbWidth);
        $('#blah').attr('height', thumbHeight);
      };
    };
    reader.readAsDataURL(input.files[0]);
  }

  $("#imgInp").change(function(){
    readURL(this);
  });
}

这可能会起作用，并且在缩小时仍保持图像的纵横比。只需将宽度更改为您希望的宽度。

Javascript输入预览图像的分辨率较低

3 个答案: