javascript math: what is the height of the image - javascript

What is the css height of the image if the width is for example: 3px?
original image height is 400px;
original image width is 800px;
what I've tried is:
convert the 3px to a percentage of the original image width:
function perwVal(v){
return 100 * v / iow; //img orig width
}
function perhVal(v){
return v / 100 * ioh; // img original height
}
var imgwidthPerc = perwVal(3);
var imgheightPerc = perhVal(imgwidthPerc);
// not correct the height is off
any help will be appreciated.

You get the ratio of the width vs. height:
const ratio = originalWidth / originalHeight;
and then to find the width for a different height:
const newWidth = newHeight * ratio;
In your example:
const originalHeight = 800;
const originalWidth = 400;
const ratio = originalWidth / originalHeight;
const newHeight = 3;
const newWidth = newHeight * ratio;
console.log(newWidth);
But note Sebastian's point that you may not need it, you may be able to use CSS's aspect-ratio.

Related

how to change bitmap image width and height in createjs

I have created a game in createjs. For images I am using bitmap to load them. I am able to give them positioning in my grid. I'm trying to change its width and height but its not working.
// this is where i am loading the image.
buttonSolve = new createjs.Bitmap(loader.getResult("buttonCategory"));
centerReg1(buttonSolve);
// i have tried a bunch of methods but none worked.
// buttonSolve.setDrawSize(200, 100);
// buttonSolve.sourceRect = { width: 280, height: 150 };
// buttonSolve.width = buttonSize.w;
// buttonSolve.height = buttonSize.h;
// buttonSolve.setBounds(0, 0, 250, 400);
// this is centerReg1 function:
function centerReg1(obj) {
obj.regX = 195;
obj.regY = 80;
// obj.setBounds(0, 0, 250, 100);
// obj.scaleX = -2;
// obj.x = canvasW / 2 - 120;
// obj.y = (canvasH / 100) * 75;
// obj.sourceRect = { width: 280, height: 150 };
}
kindly someone tell me how to do this!
I am not 100% sure
but you can solve this issue by using scaleX & scaleY properties of
buttonSolve bitmap
buttonSolve.scaleX = newWidth / originalWidth;
buttonSolve.scaleY = newHeight / originalHeight;
2nd method
buttonSolve.setTransform(0, 0, newWidth/originalWidth, newHeight/originalHeight);
Here
originalWidth & originalHeight are the original width & height
newWidth & newHeight are the updated width & height

Javascript function not giving expected results for image

This code when run should resize the height and width that a image to fit the container.
This is the output from the code(from alerts):
2488: Images natural height
3264: Images natural width
450: The containers height
1063: The containers width
612: New height
844: New width
4: The number of times it was divided to get to output
**It should divide it 6 times to provide the outcome of:
New width: 544
New height: 414
**
I am almost certain that the problem is in the Java Script:
function resize(iid, eid) {
//Get the ID of the elements (ele being the container that the image is in and img being the image its self)
var img = document.getElementById('img');
var ele = document.getElementById('contaner');
//makes the var needed
var currentwidth = ele.clientWidth;
var currentheight = ele.clientHeight;
var naturalheight = img.naturalHeight;
var naturalwidth = img.naturalWidth;
var newheight = naturalheight;
var newwidth = naturalwidth;
var x = 0;
//runs a loop that should size the image
while (newheight > currentheight && newwidth > currentwidth){
x = x + 1;
newheight = naturalheight / x;
newwidth = naturalwidth / x;
}
newheight = Math.ceil(newheight);
newwidth = Math.ceil(newwidth);
//alerts out the answers
alert(naturalheight);
alert(naturalwidth);
alert(currentheight);
alert(currentwidth);
alert(newheight);
alert(newwidth);
alert(x);
}
#contaner {
height: 450px;
width: 90%;
margin: 5% auto;
position: relative;
}
#img {
height: 450px;
width: 90%;
}
<div id="contaner">
<img src = "..\..\Resorces\Images\SlideShow\img1.jpg" style="width:652px;height:489px;" id="img"/>
<div id="left_holder"><img onClick="slide(-1)" src="..\..\Resorces\Images\arrow_left.png" class="left"/></div>
<div id="right_holder"><img onClick="slide(+1)" src="..\..\Resorces\Images\arrow_right.png" class="right"/></div>
</div>
The problem is this line:
while (newheight > currentheight && newwidth > currentwidth)
It's stopping as soon as either width or height fits within the container, where as it seems like you want both to fit within the bounds of the container. Change to || and you'll get six iterations:
while (newheight > currentheight || newwidth > currentwidth)

jQuery jslint var was used before it was defined

I've been using jslint to try see what it says about my code, and i get lots of flags, but i am working through trying improve it. However i am stuck on the error
maxHeight was used before it was defined
My jQuery:
$.fn.thumbSizr = function () { // begin function
"use strict";
return this.each(function () {
var $this = $(this);
maxWidth = $(this).parent().width(); // Max width for the image
minHeight = $(this).parent().height(); // Max height for the image
ratio = 0; // Used for aspect ratio
width = $(this).width(); // Current image width
height = $(this).height(); // Current image height
if(width > maxWidth){
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
width = width * ratio; // Reset width to match scaled image
}
// Check if current height is larger than max
if(height < minHeight){
ratio = minHeight / height; // get ratio for scaling image
$(this).css("height", minHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
}
var $img = $(this),
css = {
position: 'absolute',
marginLeft: '-' + (parseInt( $img.css('width') ) / 2) + 'px',
left: '50%',
top: '50%',
marginTop: '-' + (parseInt( $img.css('height') ) / 2) + 'px'
};
$img.css( css );
});
};
I'm no jQuery pro so this might be ropey but i really wanted to make it as good as possible. Can anyone explain and suggest why i am getting this message and how to avoid it in the future?
Thanks
You are using semicolon instead of comma when declaring multiple variable with single "var"
This part is wrong:
var $this = $(this);
maxWidth = $(this).parent().width(); // Max width for the image
minHeight = $(this).parent().height(); // Max height for the image
ratio = 0; // Used for aspect ratio
width = $(this).width(); // Current image width
height = $(this).height(); // Current image height
fixed:
var $this = $(this),
maxWidth = $(this).parent().width(), // Max width for the image
minHeight = $(this).parent().height(), // Max height for the image
ratio = 0, // Used for aspect ratio
width = $(this).width(), // Current image width
height = $(this).height(); // Current image height

How to resize images proportionally / keeping the aspect ratio?

I have images that will be quite big in dimension and I want to shrink them down with jQuery while keeping the proportions constrained, i.e. the same aspect ratio.
Can someone point me to some code, or explain the logic?
I think this is a really cool method:
/**
* Conserve aspect ratio of the original region. Useful when shrinking/enlarging
* images to fit into a certain area.
*
* #param {Number} srcWidth width of source image
* #param {Number} srcHeight height of source image
* #param {Number} maxWidth maximum available width
* #param {Number} maxHeight maximum available height
* #return {Object} { width, height }
*/
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
return { width: srcWidth*ratio, height: srcHeight*ratio };
}
Have a look at this piece of code from http://ericjuden.com/2009/07/jquery-image-resize/
$(document).ready(function() {
$('.story-small img').each(function() {
var maxWidth = 100; // Max width for the image
var maxHeight = 100; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if(width > maxWidth){
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
width = width * ratio; // Reset width to match scaled image
}
// Check if current height is larger than max
if(height > maxHeight){
ratio = maxHeight / height; // get ratio for scaling image
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
height = height * ratio; // Reset height to match scaled image
}
});
});
If I understand the question correctly, you don't even need jQuery for this. Shrinking the image proportionally on the client can be done with CSS alone: just set its max-width and max-height to 100%.
<div style="height: 100px">
<img src="http://www.getdigital.de/images/produkte/t4/t4_css_sucks2.jpg"
style="max-height: 100%; max-width: 100%">
</div>​
Here's the fiddle: http://jsfiddle.net/9EQ5c/
In order to determine the aspect ratio, you need to have a ratio to aim for.
function getHeight(length, ratio) {
var height = ((length)/(Math.sqrt((Math.pow(ratio, 2)+1))));
return Math.round(height);
}
function getWidth(length, ratio) {
var width = ((length)/(Math.sqrt((1)/(Math.pow(ratio, 2)+1))));
return Math.round(width);
}
In this example I use 16:10 since this the typical monitor aspect ratio.
var ratio = (16/10);
var height = getHeight(300,ratio);
var width = getWidth(height,ratio);
console.log(height);
console.log(width);
Results from above would be 147 and 300
There are 4 parameters to this problem
current image width iX
current image height iY
target viewport width cX
target viewport height cY
And there are 3 different conditional parameters
cX > cY ?
iX > cX ?
iY > cY ?
solution
Find the smaller side of the target view port F
Find the larger side of the current view port L
Find the factor of both F/L = factor
Multiply both sides of the current port with the factor ie, fX = iX * factor; fY = iY * factor
that's all you need to do.
//Pseudo code
iX;//current width of image in the client
iY;//current height of image in the client
cX;//configured width
cY;//configured height
fX;//final width
fY;//final height
1. check if iX,iY,cX,cY values are >0 and all values are not empty or not junk
2. lE = iX > iY ? iX: iY; //long edge
3. if ( cX < cY )
then
4. factor = cX/lE;
else
5. factor = cY/lE;
6. fX = iX * factor ; fY = iY * factor ;
This is a mature forum, I am not giving you code for that :)
actually i have just run into this problem and the solution I found was strangely simple and weird
$("#someimage").css({height:<some new height>})
and miraculously the image is resized to the new height and conserving the same ratio!
Does <img src="/path/to/pic.jpg" style="max-width:XXXpx; max-height:YYYpx;" > help?
Browser will take care of keeping aspect ratio intact.
i.e max-width kicks in when image width is greater than height and its height will be calculated proportionally. Similarly max-height will be in effect when height is greater than width.
You don't need any jQuery or javascript for this.
Supported by ie7+ and other browsers (http://caniuse.com/minmaxwh).
If the image is proportionate then this code will fill the wrapper with image. If image is not in proportion then extra width/height will get cropped.
<script type="text/javascript">
$(function(){
$('#slider img').each(function(){
var ReqWidth = 1000; // Max width for the image
var ReqHeight = 300; // Max height for the image
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if (width > height && height < ReqHeight) {
$(this).css("min-height", ReqHeight); // Set new height
}
else
if (width > height && width < ReqWidth) {
$(this).css("min-width", ReqWidth); // Set new width
}
else
if (width > height && width > ReqWidth) {
$(this).css("max-width", ReqWidth); // Set new width
}
else
(height > width && width < ReqWidth)
{
$(this).css("min-width", ReqWidth); // Set new width
}
});
});
</script>
This should work for images with all possible proportions
$(document).ready(function() {
$('.list img').each(function() {
var maxWidth = 100;
var maxHeight = 100;
var width = $(this).width();
var height = $(this).height();
var ratioW = maxWidth / width; // Width ratio
var ratioH = maxHeight / height; // Height ratio
// If height ratio is bigger then we need to scale height
if(ratioH > ratioW){
$(this).css("width", maxWidth);
$(this).css("height", height * ratioW); // Scale height according to width ratio
}
else{ // otherwise we scale width
$(this).css("height", maxHeight);
$(this).css("width", height * ratioH); // according to height ratio
}
});
});
Here's a correction to Mehdiway's answer. The new width and/or height were not being set to the max value. A good test case is the following (1768 x 1075 pixels): http://spacecoastsports.com/wp-content/uploads/2014/06/sportsballs1.png. (I wasn't able to comment on it above due to lack of reputation points.)
// Make sure image doesn't exceed 100x100 pixels
// note: takes jQuery img object not HTML: so width is a function
// not a property.
function resize_image (image) {
var maxWidth = 100; // Max width for the image
var maxHeight = 100; // Max height for the image
var ratio = 0; // Used for aspect ratio
// Get current dimensions
var width = image.width()
var height = image.height();
console.log("dimensions: " + width + "x" + height);
// If the current width is larger than the max, scale height
// to ratio of max width to current and then set width to max.
if (width > maxWidth) {
console.log("Shrinking width (and scaling height)")
ratio = maxWidth / width;
height = height * ratio;
width = maxWidth;
image.css("width", width);
image.css("height", height);
console.log("new dimensions: " + width + "x" + height);
}
// If the current height is larger than the max, scale width
// to ratio of max height to current and then set height to max.
if (height > maxHeight) {
console.log("Shrinking height (and scaling width)")
ratio = maxHeight / height;
width = width * ratio;
height = maxHeight;
image.css("width", width);
image.css("height", height);
console.log("new dimensions: " + width + "x" + height);
}
}
$('#productThumb img').each(function() {
var maxWidth = 140; // Max width for the image
var maxHeight = 140; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if(width > height){
height = ( height / width ) * maxHeight;
} else if(height > width){
maxWidth = (width/height)* maxWidth;
}
$(this).css("width", maxWidth); // Set new width
$(this).css("height", maxHeight); // Scale height based on ratio
});
2 Steps:
Step 1) calculate the ratio of the original width / original height of Image.
Step 2) multiply the original_width/original_height ratio by the new desired height to get the new width corresponding to the new height.
Without additional temp-vars or brackets.
var width= $(this).width(), height= $(this).height()
, maxWidth=100, maxHeight= 100;
if(width > maxWidth){
height = Math.floor( maxWidth * height / width );
width = maxWidth
}
if(height > maxHeight){
width = Math.floor( maxHeight * width / height );
height = maxHeight;
}
Keep in Mind: Search engines don't like it, if width and height attribute does not fit the image, but they don't know JS.
After some trial and error I came to this solution:
function center(img) {
var div = img.parentNode;
var divW = parseInt(div.style.width);
var divH = parseInt(div.style.height);
var srcW = img.width;
var srcH = img.height;
var ratio = Math.min(divW/srcW, divH/srcH);
var newW = img.width * ratio;
var newH = img.height * ratio;
img.style.width = newW + "px";
img.style.height = newH + "px";
img.style.marginTop = (divH-newH)/2 + "px";
img.style.marginLeft = (divW-newW)/2 + "px";
}
The resize can be achieved(maintaining aspect ratio) using CSS.
This is a further simplified answer inspired by Dan Dascalescu's post.
http://jsbin.com/viqare
img{
max-width:200px;
/*Or define max-height*/
}
<img src="http://e1.365dm.com/13/07/4-3/20/alastair-cook-ashes-profile_2967773.jpg" alt="Alastair Cook" />
<img src="http://e1.365dm.com/13/07/4-3/20/usman-khawaja-australia-profile_2974601.jpg" alt="Usman Khawaja"/>
This issue can be solved by CSS.
.image{
max-width:*px;
}
Resize to fit the container, get scale factor, scale down percentage control
$(function () {
let ParentHeight = 200;
let ParentWidth = 300;
$("#Parent").width(ParentWidth).height(ParentHeight);
$("#ParentHeight").html(ParentHeight);
$("#ParentWidth").html(ParentWidth);
var RatioOfParent = ParentHeight / ParentWidth;
$("#ParentAspectRatio").html(RatioOfParent);
let ChildHeight = 2000;
let ChildWidth = 4000;
var RatioOfChild = ChildHeight / ChildWidth;
$("#ChildAspectRatio").html(RatioOfChild);
let ScaleHeight = ParentHeight / ChildHeight;
let ScaleWidth = ParentWidth / ChildWidth;
let Scale = Math.min(ScaleHeight, ScaleWidth);
$("#ScaleFactor").html(Scale);
// old scale
//ChildHeight = ChildHeight * Scale;
//ChildWidth = ChildWidth * Scale;
// reduce scale by 10%, you can change the percentage
let ScaleDownPercentage = 10;
let CalculatedScaleValue = Scale * (ScaleDownPercentage / 100);
$("#CalculatedScaleValue").html(CalculatedScaleValue);
// new scale
let NewScale = (Scale - CalculatedScaleValue);
ChildHeight = ChildHeight * NewScale;
ChildWidth = ChildWidth * NewScale;
$("#Child").width(ChildWidth).height(ChildHeight);
$("#ChildHeight").html(ChildHeight);
$("#ChildWidth").html(ChildWidth);
});
#Parent {
background-color: grey;
}
#Child {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Parent">
<div id="Child"></div>
</div>
<table>
<tr>
<td>Parent Aspect Ratio</td>
<td id="ParentAspectRatio"></td>
</tr>
<tr>
<td>Child Aspect Ratio</td>
<td id="ChildAspectRatio"></td>
</tr>
<tr>
<td>Scale Factor</td>
<td id="ScaleFactor"></td>
</tr>
<tr>
<td>Calculated Scale Value</td>
<td id="CalculatedScaleValue"></td>
</tr>
<tr>
<td>Parent Height</td>
<td id="ParentHeight"></td>
</tr>
<tr>
<td>Parent Width</td>
<td id="ParentWidth"></td>
</tr>
<tr>
<td>Child Height</td>
<td id="ChildHeight"></td>
</tr>
<tr>
<td>Child Width</td>
<td id="ChildWidth"></td>
</tr>
</table>
Resizing an image to a certain percentage
// scale can be 0.40, 0.80, etc.
function imageScaler(originalHeight, originalWidth, scale) {
const scaledWidth = originalWidth * scale;
const scaledHeight = (originalHeight / originalWidth) * scaledWidth;
return [scaledHeight, scaledWidth];
}
You can determine width height if you want a particular aspect ratio to do so,
Let you have a picture of 3264×2448
Pictures aspect ratio is => 2448 ÷ 3264 =0.75
Now just check number which gives 0.75 on division.
Like: for
16:9 => 9÷16 =0.5625 (wrong it is not 0.75)
Now 4:3 =>3÷4=0.75 (we get it )
So the original aspect ratio is 4:3
now to resize the image just do
Width=3264 ÷/× 4
Height=2448 ÷/× 3
÷ for reducing
× for increasing
Hope you can understand and code yourself this is very effective because we just need to do very basic arithmetic just division or multiplication so simple.
Let me know if i am wrong.
This totally worked for me for a draggable item - aspectRatio:true
.appendTo(divwrapper).resizable({
aspectRatio: true,
handles: 'se',
stop: resizestop
})

Display Image in fixed size div

I've a 100*100 <div> in which I would like to display images of different sizes randomly without stretching them.
Note:The image should appear as origional, just resizing should be done inorder to place it in box
Maybe this style will help you:
div {
position:relative;
}
div img {
max-width:100%;max-height:100%;
}
here's a simple function to calculate your aspect ratio and size the image down. it takes the path to the file and the original width and height of the image. you can provide all that however you see fit. 'myElement' would be the id of your image element.
function loadImage(filename, width, height) {
var aspect = width / height;
var w, h;
if (width > height) {
w = 100;
h = Math.round(100 / aspect);
}
else {
h = 100;
w = Math.round(100 * aspect);
}
var element = document.getElementById('myElement');
element.src = filename;
element.style.width = w + 'px';
element.style.height = h + 'px';
}

Categories

Resources