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

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 预览图像。在 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>