JavaScript resize image with canvas Set Height auto

Question

How I can set image height correctly with uploading different images, Every time user upload different dimension images, so i need to set fixed width and height need to be correct fit to the width(I mean proportional to width).Also consider other better solutions.

$(".upload-button").on('click', function() {
  $(".file-upload").click();
});
var fileReader = new FileReader();

fileReader.onload = function(event) {
  var image = new Image();

  image.onload = function() {
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    canvas.width = 500;
    canvas.height = 380;
    //canvas.height=image.height/1;

    $('#upload-preview').width(500); //pixels

    context.drawImage(image, 0, 0, image.width, image.height, 0, 0,
      canvas.width,
      canvas.height
    );

    document.getElementById("upload-preview").src = canvas.toDataURL();
  }
  image.src = event.target.result;
};

var uploadImage = function() {
  var uploadImage = document.getElementById("upload-Image");

  if (uploadImage.files.length === 0) {
    return;
  }

  var uploadFile = document.getElementById("upload-Image").files[0];
  fileReader.readAsDataURL(uploadFile);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="upload-button" id="imageresize"><img id="upload-preview" class="profile-pic" src="add-image.png" /></div>
<input id="upload-Image" class="file-upload" type="file" name="my_file" onchange="uploadImage();" accept="image/*">

I am not able to undestand your issue. As per your code, you are setting a height and width to canvas. So what ever image use uploads, it will be resized to your height and width. Isn't what you want? — SANGEETH KUMAR S G, Sep 28 '21 at 10:24
@SANGEETHKUMARSG I need the heigh to be proportional to width, How i can set auto height — Noufal Binu, Sep 28 '21 at 10:25
@Saeed I don't want image stretched. how i can set dynamic height proportional to width, I mean we set height auto on html, like that. — Noufal Binu, Sep 28 '21 at 10:38
@KrystianSztadhaus Do you have any better recommendations for resizing image? — Noufal Binu, Sep 28 '21 at 10:59
Unfortunately I can not post the answer, because the post is already closed, but the comment can not be longer than 300 characters :( — , Sep 28 '21 at 11:07
@KrystianSztadhaus I will ask another question, can you answer? — Noufal Binu, Sep 29 '21 at 04:23

score 1 · Answer 1 · answered Sep 28 '21 at 10:43

I updated your code. I scaled down the image using aspect ratio. Please check this is what you wanted.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="upload-button" id="imageresize"><img id="upload-preview" class="profile-pic" src="add-image.png" /></div>
<input id="upload-Image" class="file-upload" type="file" name="my_file" onchange="uploadImage();" accept="image/*">

<script>
$(".upload-button").on('click', function() {
  $(".file-upload").click();
});
var fileReader = new FileReader();

fileReader.onload = function(event) {
  var image = new Image();

  image.onload = function() {
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    canvas.width = 500;
    var hRatio = canvas.width  / image.width    ;
   var vRatio =  canvas.height / image.height  ;
   var ratio  = Math.min ( hRatio, vRatio );
   var centerShift_x = ( canvas.width - image.width*ratio ) / 2;
   var centerShift_y = ( canvas.height - image.height*ratio ) / 2;  
   context.clearRect(0,0,canvas.width, canvas.height);
   context.drawImage(image, 0,0, image.width, image.height,
                      centerShift_x,centerShift_y,image.width*ratio, image.height*ratio);
    //canvas.height=image.height/1;

   // $('#upload-preview').width(500); //pixels

    //context.drawImage(image, 0, 0, image.width, image.height, 0, 0,
    //  canvas.width,
    //  canvas.height
    //);

    document.getElementById("upload-preview").src = canvas.toDataURL();
  }
  image.src = event.target.result;
};

var uploadImage = function() {
  var uploadImage = document.getElementById("upload-Image");

  if (uploadImage.files.length === 0) {
    return;
  }

  var uploadFile = document.getElementById("upload-Image").files[0];
  fileReader.readAsDataURL(uploadFile);
}
</script>

score 1 · Answer 2 · answered Sep 28 '21 at 10:43

Source

Calculate ratio

var hRatio = canvas.width / image.width;
var vRatio = canvas.height / image.height;
var ratio = Math.min(hRatio, vRatio);

context.drawImage(image, 0, 0, image.width, image.height, 0, 0,
      image.width * ratio, image.height * ratio
);

Full code:

$(".upload-button").on('click', function() {
  $(".file-upload").click();
});
var fileReader = new FileReader();

fileReader.onload = function(event) {
  var image = new Image();

  image.onload = function() {
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    canvas.width = 500;
    canvas.height = 380;
    //canvas.height=image.height/1;

    $('#upload-preview').width(500); //pixels

    var hRatio = canvas.width / image.width;
    var vRatio = canvas.height / image.height;
    var ratio = Math.min(hRatio, vRatio);

    context.drawImage(image, 0, 0, image.width, image.height, 0, 0,
      image.width * ratio, image.height * ratio
    );

    document.getElementById("upload-preview").src = canvas.toDataURL();
  }
  image.src = event.target.result;
};

var uploadImage = function() {
  var uploadImage = document.getElementById("upload-Image");

  if (uploadImage.files.length === 0) {
    return;
  }

  var uploadFile = document.getElementById("upload-Image").files[0];
  fileReader.readAsDataURL(uploadFile);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="upload-button" id="imageresize"><img id="upload-preview" class="profile-pic" src="add-image.png" /></div>
<input id="upload-Image" class="file-upload" type="file" name="my_file" onchange="uploadImage();" accept="image/*">

showing white space on right side when opening image in new tab — Noufal Binu, Sep 28 '21 at 10:49
Read the source I mentioned, There is a way to put the image on center. @NoufalBinu — Saeed, Sep 28 '21 at 10:53

JavaScript resize image with canvas Set Height auto

2 Answers2