Javascript lower resolution of input preview image

Question

I got this javascript function, which previews the input image (with the original size) to an input field.

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

and the associated HTML:

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

I got the code from this answer: Preview an image before it is uploaded

My question is if and how it is possible to change the resolution of the previewed image, I want to change only the resolution of the previewed image not the image itself.

Any ideas?

Yes, it will change the res on the displayed image, but it will still load the full image (in KB). — KungWaz, Aug 26 '16 at 15:13
Why do you want to change the **resolution** and how ? increase resolution is like *not possible*, decrease it is like *why* ? If you want to change the display size, and not the resolution, then just use css. — Kaiido, Aug 27 '16 at 04:21

Adnan Umer · Answer 1 · 2016-08-26T13:41:38.390

1

One alternative can be to preview image by drawing that in canvas. While drawing in canvas you can specify a custom resolution. Something like that

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>

edited Aug 26 '16 at 13:41

answered Aug 26 '16 at 13:36

Adnan Umer

3,669
2
18
38

You have to wait for `$('#blah)[0]` has loaded before drawing it to the canvas. – Kaiido Aug 27 '16 at 04:19
I get this error `Uncaught TypeError: Cannot read property 'getContext' of undefined` on this line `var ctx = $('#myCanvas')[0].getContext("2d");` – utdev Aug 30 '16 at 07:51
hmm could you show me how you would do this with many input fields with the same class name? – utdev Aug 30 '16 at 08:03

score 1 · Answer 2 · answered Aug 26 '16 at 15:20

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

This might work and still keep the aspect ratio of the image when made smaller. Just change the width to whatever you would like it to be.

Thanks for your suggestion but the size of the image just does change but but the resolution, it gets smaller but when I zoom in it still does look like the resolution did not change — utdev, Aug 30 '16 at 07:31
Then I don't think I understand what you want to do, since you can't magically change the resolution of the image, it is what it is. — KungWaz, Sep 01 '16 at 07:20

score 0 · Answer 3 · answered Aug 26 '16 at 14:33

0

Change your img and add the width and/or height attributes to constrict the resolution to your desired size e.g:

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

answered Aug 26 '16 at 14:33

Morgs

1,558
3
19
34

does the previewed resolution change? – utdev Aug 26 '16 at 14:42
@JohnDoe2, yes...that will make the img with id="blah" as per HTML in the answer to display a 300x300 pxiels image. You can change the resolution to what you want. Have you given it a try? – Morgs Aug 26 '16 at 14:44
I think I worked thank you I will give it a few tries and give you a response later – utdev Aug 26 '16 at 14:47

Javascript lower resolution of input preview image

3 Answers3