Change width of a image file javascript

Question

If a user selects an image I preview it in a div as background-image, I have 2 input fields ( width , height ) so the user can determine the width and the height of the uploaded image.

I want to resize the preview image if the user changes the width / height.

But I keep getting the error : Uncaught TypeError: Cannot read property 'width' of undefined

Here is my code:

HTML - input fields

    <input type="file" name="sourceImage" id="sourceImage">

    <input type="text" class="form-control input-width input-px" maxlength="2" name="width">CM breed
    <input type="text" class="form-control input-height input-px" maxlength="2" name="height">CM hoog

Javascript - functions

In this function I preview the image and put the image in the image var

  var image;

  $(function() {

      $("#sourceImage").on("change", function()
      {
          var files = !!this.files ? this.files : [];
          if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support

          if (/^image/.test( files[0].type)){ // only image file
              var reader = new FileReader(); // instance of the FileReader
              reader.readAsDataURL(files[0]); // read the local file

              image = this.result;

              reader.onloadend = function(){ // set image data as background of div
                  $( ".source" ).css( "background-image", "url("+this.result+")" );
              }
          }
      });
  });

in this function I want to change the width of the image var which has the file stored into

      $(function(){
      $(".input-px").on("change", function()
      {

          image.width($(".input-width").val());

      })
  })

'in this function...' Where is this function in relation to the rest of the code? The error message tells you exactly what is wrong: `Cannot read property 'width' of undefined`. — Tony Barnes, Jun 18 '15 at 11:45
You are assigning this.result to the image variable at a wrong place as it will be available inside onloadend function. However, the value returned by this.result with be a string and not an image object that you are expecting it to be. You might have to take a different approach to resize the background image, [this](http://stackoverflow.com/questions/20958078/resize-base64-image-in-javascript-without-using-canvas) question talks about a possible solution. — Kapil Kashyap, Jun 19 '15 at 18:48
See [this](http://stackoverflow.com/questions/23945494/use-html5-to-resize-an-image-before-upload/24015367#24015367) as well. — Kapil Kashyap, Jun 19 '15 at 18:55

Kapil Kashyap · Answer 1 · 2015-06-19T18:59:11.213

-1

$(function(){
    $(".input-px").on("change", function() {
        var _width = parseInt($(".input-width").val(), 10) || 0;
        var _height = parseInt($(".input-height").val(), 10) || 0;
        if(_width > 0) {
            image.width(_width);
        }
        if(_height > 0) {
            image.width(_height);
        }
    });
});

Edit: Please take this as an enhancement to your input-px onchange event functionality.

edited Jun 19 '15 at 18:59

answered Jun 18 '15 at 11:53

Kapil Kashyap

111
8

Why was the OP getting the error? If this works (you haven't stated that it will) - how/why? – Tony Barnes Jun 18 '15 at 12:01
@TonyBarnes - Sorry, I missed that. Will update the answer. – Kapil Kashyap Jun 19 '15 at 07:15

Change width of a image file javascript

1 Answers1