1

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?

Community
  • 1
  • 1
utdev
  • 3,168
  • 5
  • 31
  • 58
  • have you tried to add width and height to the img tag? – KungWaz Aug 26 '16 at 13:40
  • @KungWaz does it change the previwed resolution? – utdev Aug 26 '16 at 14:43
  • 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

3 Answers3

0

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>
Adnan Umer
  • 3,409
  • 2
  • 14
  • 35
  • 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
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>
Morgs
  • 1,076
  • 1
  • 14
  • 26
  • 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
0
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.

KungWaz
  • 1,646
  • 2
  • 30
  • 55
  • 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