JavaScript resize image with canvas Set Height auto [duplicate]-CodePudding

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/*">

CodePudding user response：

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>

CodePudding user response：

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/*">