resize image using javascript

Question

I'm using javascript function to input image.

This is my HTML:

<input type="file" name="filUpload" id="filUpload" onclick="" onchange="showimagepreview(this)">
<br />
<div id="before">
<img id="imgprvw" alt="" class="img-thumbnail" style="width: 250px; height: 250px;" />

And this is my JavaScript:

function showimagepreview(input) { //image preview after select image
  if (input.files && input.files[0]) {
    var filerdr = new FileReader();
    filerdr.onload = function(e) {
      url = e.target.result;
      image = url;
      $('#imgprvw').attr('src', url);
      //console.log(url);

      //$('#imgprvw').attr('src', e.target.result);
      //url = e.target.result;
      //$("#imgpath").val(url);
    }
    filerdr.readAsDataURL(input.files[0]);
  }
}

This code convert image to bite array, I need to resize my image using that bite array. Is there any possible methods to do it.

I will pass that binary array to web service. I the image size too high, it takes much time, that's why I need to convert.

If you actually want to resize the image (and not just change the size on the site), maybe check out resizing via canvas: stackoverflow.com/questions/19262141/… But generally I would do that on the backend. — nils
– nils, Commented Nov 25, 2014 at 9:21
i will pass that binary array to web service. if the image size too high, it takes much time, that's why i need co convert. — Saranga
– Saranga, Commented Nov 25, 2014 at 9:25
Yes, then resize it via canvas. You can use document.getElementById("mycanvas").toDataURL('image/png'); to get the PNG as a data-url afterwards. — nils
– nils, Commented Nov 25, 2014 at 9:25
Possible duplicate of Resize image with javascript canvas (smoothly) — lxg
– lxg, Commented Jul 10, 2017 at 9:37

Community · Accepted Answer · 2017-05-23 12:09:24Z

10

Resize it on the canvas like this:

function showimagepreview(input) { //image preview after select image
  if (input.files && input.files[0]) {
    var filerdr = new FileReader();

    filerdr.onload = function(e) {
      var img = new Image();

      img.onload = function() {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = 250;
        canvas.height = canvas.width * (img.height / img.width);
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

        // SEND THIS DATA TO WHEREVER YOU NEED IT
        var data = canvas.toDataURL('image/png');

        $('#imgprvw').attr('src', img.src);
        //$('#imgprvw').attr('src', data);//converted image in variable 'data'
      }
      img.src = e.target.result;
    }
    filerdr.readAsDataURL(input.files[0]);
  }
}

I haven't tested this yet, but it should work.

Resize image with javascript canvas (smoothly)

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Nov 25, 2014 at 9:35

nils

27.4k6 gold badges73 silver badges82 bronze badges

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

6 Comments

t.niese Over a year ago

You tried to linked the question Resize image with javascript canvas (smoothly), but it was not visible the that way. As a note: this question very similar to the linked one, so it should probably be better marked as duplicate.

nils Over a year ago

It's similar, but it didn't include file upload and adding the loaded image to a canvas. Thanks for the code clean-up though. I didn't find an easy way to indent.

t.niese Over a year ago

I understand your point and I might be wrong about it: But creating answers over and over again, that are just slightly different, is not that helpful to keep SO clear. The question is about resizing and not "How to draw data that was read by FileReader as image into a canvas" or something like this. While the OP might not know how to do that it should be a different question IMHO.

Saranga Over a year ago

data in img.src is not converted data. but there is some values in var data. but i can't identify what value is this.

nils Over a year ago

t.niese, you do have a point. Can you mark it as duplicate? Saranga, the value in data is base64 encoded. You should be able to use it as per your edit. Does it work?

|

Collectives™ on Stack Overflow

resize image using javascript

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related