Calculate Image width ratio
Formula - width_ratio = (new_height/original_height)*original_widthExample-
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Width ratio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body class="p-5">
<div class="custom-file w-25 my-2">
<input type="file" class="custom-file-input" accept="image/*" id="upload-file">
<label for="upload" class="custom-file-label">Choose Images</label>
</div>
<input type="number" class="form-control new-width w-25 mb-2" placeholder="Width" disabled="disabled">
<input type="number" class="form-control new-height w-25" placeholder="Height">
<script>
var upload = document.querySelector("#upload-file");
upload.onchange = function()
{
var url = URL.createObjectURL(this.files[0]);
var img = new Image();
img.src = url;
var width;
var height;
img.onload = function()
{
width = this.width;
height = this.height;
$(".new-width").val(width);
$(".new-height").val(height);
}
img.remove();
$(".new-height").on("input",function(){
var new_height = $(".new-height").val();
var width_ratio = Math.floor((new_height/height)*width);
$(".new-width").val(width_ratio);
});
}
</script>
</body>
</html>Calculate Image height ratio-
Formula - height_ratio = (new_width/original_width)*original_heightExample-
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Height ratio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body class="p-5">
<div class="custom-file w-25 my-2">
<input type="file" class="custom-file-input" accept="image/*" id="upload-file">
<label for="upload" class="custom-file-label">Choose Images</label>
</div>
<input type="number" class="form-control new-width w-25 mb-2" placeholder="Width">
<input type="number" class="form-control new-height w-25" placeholder="Height" disabled="disabled">
<script>
var upload = document.querySelector("#upload-file");
upload.onchange = function()
{
var url = URL.createObjectURL(this.files[0]);
var img = new Image();
img.src = url;
var width;
var height;
img.onload = function()
{
width = this.width;
height = this.height;
$(".new-width").val(width);
$(".new-height").val(height);
}
img.remove();
$(".new-width").on("input",function(){
var new_width = $(".new-width").val();
var height_ratio = Math.floor((new_width/width)*height);
$(".new-height").val(height_ratio);
});
}
</script>
</body>
</html>
Publish A Comment