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: http://stackoverflow.com/questions/19262141/resize-image-with-javascript-canvas-smoothly But generally I would do that on the backend. — nils, Nov 25 '14 at 09: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, Nov 25 '14 at 09: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, Nov 25 '14 at 09:25
Possible duplicate of [Resize image with javascript canvas (smoothly)](https://stackoverflow.com/questions/19262141/resize-image-with-javascript-canvas-smoothly) — lxg, Jul 10 '17 at 09:37
https://stackoverflow.com/questions/19262141/resize-image-with-javascript-canvas-smoothly/53986239#53986239 — Eyal c, Jan 01 '19 at 09:51
This answer explains very clearly how to do it. [https://stackoverflow.com/questions/19262141/resize-image-with-javascript-canvas-smoothly/53986239#53986239](https://stackoverflow.com/questions/19262141/resize-image-with-javascript-canvas-smoothly/53986239#53986239) — Eyal c, Jan 01 '19 at 09:52

score 10 · Accepted Answer · edited May 23 '17 at 12:09

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 '17 at 12:09

Community

1
1

answered Nov 25 '14 at 09:35

nils

25,734
5
70
79

You tried to linked the question [Resize image with javascript canvas (smoothly)](http://stackoverflow.com/a/19262385/1960455), 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. – t.niese Nov 25 '14 at 09:57
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. – nils Nov 25 '14 at 10:01
1

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. – t.niese Nov 25 '14 at 10:19
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. – Saranga Nov 25 '14 at 10:41
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? – nils Nov 25 '14 at 10:47
i'd try to use, converted image display on canvas, but value in data can't be decord using decoder. but value goes to database and can retrieve from database. – Saranga Nov 25 '14 at 11:09

resize image using javascript

1 Answers1

Linked