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

【问题标题】：Javascript lower resolution of input preview imageJavascript输入预览图像的分辨率较低
【发布时间】：2016-08-26 13:29:54
【问题描述】：

我得到了这个 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

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

有什么想法吗？

【问题讨论】：

你试过给img标签加宽高吗？
@KungWaz 会改变预览的分辨率吗？
是的，它会改变显示图像的分辨率，但仍会加载完整的图像（以 KB 为单位）。
为什么要更改分辨率以及如何更改？增加分辨率就像不可能，降低它就像为什么？如果要更改显示大小而不是分辨率，则只需使用 css。

标签： javascript jquery html image filereader

【解决方案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>

【讨论】：

您必须等待$('#blah)[0] 加载完毕才能将其绘制到画布上。
我在这一行 Uncaught TypeError: Cannot read property 'getContext' of undefined 收到此错误 var ctx = $('#myCanvas')[0].getContext("2d");
嗯，你能告诉我你会如何处理许多具有相同类名的输入字段吗？

【解决方案2】：

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

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

【讨论】：

感谢您的建议，但是图像的大小确实发生了变化，但是分辨率变小了，但是当我放大时，它看起来仍然像分辨率没有变化
那我想我不明白你想做什么，因为你不能神奇地改变图像的分辨率，它就是这样。

【解决方案3】：

更改您的 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>

【讨论】：

预览的分辨率有变化吗？
@JohnDoe2，是的...这将使 id="blah" 的 img 根据 HTML 在答案中显示 300x300 像素图像。您可以将分辨率更改为您想要的。你试过了吗？
我想我工作了，谢谢，我会尝试几次，稍后再给你回复