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
– KungWaz, Commented Aug 26, 2016 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
– Kaiido, Commented Aug 27, 2016 at 4:21

Adnan Umer · Accepted Answer · 2016-08-26 13:41:38Z

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, 2016 at 13:41

answered Aug 26, 2016 at 13:36

Adnan Umer

3,6892 gold badges20 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kaiido Over a year ago

You have to wait for $('#blah)[0] has loaded before drawing it to the canvas.

utdev Over a year ago

I get this error Uncaught TypeError: Cannot read property 'getContext' of undefined on this line var ctx = $('#myCanvas')[0].getContext("2d");

utdev Over a year ago

hmm could you show me how you would do this with many input fields with the same class name?

KungWaz · Accepted Answer · 2016-08-26 15:20:54Z

1

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.

answered Aug 26, 2016 at 15:20

KungWaz

1,9663 gold badges43 silver badges65 bronze badges

2 Comments

utdev Over a year ago

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

KungWaz Over a year ago

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.

Morgs · Accepted Answer · 2016-08-26 14:33:24Z

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, 2016 at 14:33

Morgs

1,7663 gold badges23 silver badges34 bronze badges

3 Comments

utdev Over a year ago

does the previewed resolution change?

Morgs Over a year ago

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

utdev Over a year ago

I think I worked thank you I will give it a few tries and give you a response later

Collectives™ on Stack Overflow

Javascript lower resolution of input preview image

3 Answers 3

3 Comments

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related