Div width and height based on inner image width & height in jquery resizable() function
Hi i have a resizable jquery div ,and an image inside this div .
$( function() {
var inputLocalFont = document.getElementById("user_file");
inputLocalFont.addEventListener("change",previewImages,false);
function previewImages(){
var fileList = this.files;
var anyWindow = window.URL || window.webkitURL;
for(var i = 0; i < fileList.length; i++){
var objectUrl = anyWindow.createObjectURL(fileList[i]);
$('.new-multiple').append('<div class="img-div"><img src="' + objectUrl + '" class="newly-added" /></div>');
window.URL.revokeObjectURL(fileList[i]);
}
$( ".img-div" ).draggable();
$( ".img-div" ).resizable();
$(".newly-added").on("click", function(e) {
$(".newly-added").removeClass("img-selected");
$(this).addClass("img-selected");
e.stopPropagation();
});
$(document).on("click", function(e) {
if ($(e.target).is(".newly-added") === false) {
$(".newly-added").removeClass("img-selected");
}
});
}
});
.new-multiple {
width:400px !important;
height:400px !important;
background:white;
border:2px solid red;
overflow:hidden;
}
.img-div {
width:200px;
height:200px;
}
.newly-added {
width:100%;
height:100%;
}
.img-selected{
box-shadow: 1px 2px 6px 6px rgb(206, 206, 206);
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input name="user_file[]" id="user_file" style="position: relative;overflow: hidden" multiple="" type="file">
<div class="new-multiple"></div>
https://jsfiddle.net/vd11qyzv/7/
Here i have to set the image width , div width manually for the initial loading
.img-div{
width:200px;
height:200px;
}
.newly-added{
width:100%;
height:100%;
}
if i didn't use this css then resizable will not work.
But i don't want to do this .
Because the uploaded image will become stretched or enlarged because of this manual width and height . Original image dimension will lost.
How can we solve this ?
First, there is lots of useful info here: How to get image size (height & width) using JavaScript?
Please research your issue first before posting.
Second, using the example I offered in the previous question you asked, we can gather this detail by using JavaScript, var img = new Image();, to create the image object, not in the DOM or Markup, and then get the dimensions from it once it is loaded.
Snippet
var imgDim = {
width: 0,
height: 0
};
var newImg = new Image();
$(newImg).attr({
src: objectUrl,
id: "img-" + key,
class: "newly-added"
}).load(function(e) {
imgDim.width = this.width;
imgDim.height = this.height;
$(newImg).appendTo($newDiv).css({
width: imgDim.width + "px",
height: imgDim.height + "px"
});
});
$(newImg).resizable();
window.URL.revokeObjectURL(val);
Working Example: https://jsfiddle.net/Twisty/vd11qyzv/12/
Update
If you want to resize the image and retain the ratio, you can do this using a set Width or Height, and calculating a ratio value from that. For example, if you wanted to set the width to 200 pixels:
Nw = 200
Nh = Ih * (200/Iw)
Snippet
imgDim.width = 200;
imgDim.height = Math.floor(this.height * (200 / this.width));
If your original dimensions were 1536 x 2048, they would result in 200 x 266. Working example: https://jsfiddle.net/Twisty/vd11qyzv/15/