CODEWITHSUNDEEP
javascriptimage
Spyderfusion02
Spyderfusion02

Reputation: 1073

Change image size with JavaScript

I'm trying to change the size of an image with JavaScript. The jS file is separate from the HTML page.

I want to set the height and width of an image in the JS file. Any good ways on doing this?

Upvotes: 66

Views: 346438

Answers (8)

David Gaspar
David Gaspar

Reputation: 463

Direct manipulation

HTML tag declaration for image:

<img id="my-img" src="src/to/your/image.jpg" width="1280px" height="720px" />
<!-- OR -->
<img id="my-img" src="src/to/your/image.jpg" style="width: 1280px; height: 720px;" />

Handling html tag by direct access to object image:

const myImg = document.getElementById("my-img");

// Set a new width and height
myImg.style.width = "800px";
myImg.style.height = "450px";
// Or set a new width and height by attribute
// This option is not advisable because the attribute has a 
// low priority over the style property.
myImg.setAttribute("width", 800);
myImg.setAttribute("height", 450);

Functions for manipulation

Using the updateImageSizeWithWidth or updateImageSizeWithHeight method below, you can increase or decrease any image without having to explicitly specify the exact width and height, you only need one value out of these two to update the image size.

/**
 * Update image size using width
 *
 * param {HTMLImageElement} img
 * param {number} newWidth
 */function updateImageSizeWithWidth(img, newWidth) {
  // Getting the width and height of the current image 
  const oldWidth =  Number.parseFloat(getComputedStyle(img).width || img.getAttribute("width"));
  const oldHeight = Number.parseFloat(getComputedStyle(img).height || img.getAttribute("height"));
  // Getting proportional height with new width
  const newHeight = (newWidth * oldHeight)/oldWidth;
  // Setting dimensions in the image
  img.style.width = `${newWidth}px`;
  img.style.height = `${newHeight}px`;
}

/**
 * Update image size using height
 *
 * param {HTMLImageElement} img
 * param {number} newHeight
 */
function updateImageSizeWithHeight(img, newHeight) {
  // Getting the width and height of the current image 
  const oldWidth =  Number.parseFloat(getComputedStyle(img).width || img.getAttribute("width"));
  const oldHeight = Number.parseFloat(getComputedStyle(img).height || img.getAttribute("height"));
  // Getting proportional height with new width
  const newWidth = (newHeight * oldWidth)/oldHeight;
  // Setting dimensions in the image
  img.style.width = `${newWidth}px`;
  img.style.height = `${newHeight}px`;
}

updateImageSizeWithWidth(myImg, 800);
// Or
updateImageSizeWithHeight(myImg, 450);

Upvotes: 2

Vini
Vini

Reputation: 1

You can do this:

  • .html file:
<img src="src/to/your/img.jpg" id="yourImgId"/>
  • .js file:
document.getElementById("yourImgId").style.height = "heightpx";

The same you can do with the width.

Upvotes: 0

H.taha
H.taha

Reputation: 21

you can see the result here In these simple block of code you can change the size of your image ,and make it bigger when the mouse enter over the image , and it will return to its original size when mouve leave.

html:

<div>
<img  onmouseover="fifo()" onmouseleave="fifo()" src="your_image"   
       width="10%"  id="f" >
</div>

js file:

var b=0;
function fifo() {
       if(b==0){
            document.getElementById("f").width = "300";
           b=1;
          }
       else
          {
         document.getElementById("f").width = "100";
          b=0;
        }
   }

Upvotes: 2

JDH
JDH

Reputation: 1

//  This one has print statement so you can see the result at every stage if     you would like.  They are not needed

function crop(image, width, height)
{
    image.width = width;
    image.height = height;
    //print ("in function", image, image.getWidth(), image.getHeight());
    return image;
}

var image = new SimpleImage("name of your image here");
//print ("original", image, image.getWidth(), image.getHeight());
//crop(image,200,300);
print ("final", image, image.getWidth(), image.getHeight());

Upvotes: 0

Will
Will

Reputation: 81

Changing an image is easy, but how do you change it back to the original size after it has been changed? You may try this to change all images in a document back to the original size:

var i,L=document.images.length;
for(i=0;i<L;++i){
 document.images[i].style.height = 'auto'; //setting CSS value
 document.images[i].style.width = 'auto'; //setting CSS value
// document.images[i].height = ''; (don't need this, would be setting img.attribute)
// document.images[i].width = ''; (don't need this, would be setting img.attribute)
}

Upvotes: 6

Grant Wagner
Grant Wagner

Reputation: 25941

If you want to resize an image after it is loaded, you can attach to the onload event of the <img> tag. Note that it may not be supported in all browsers (Microsoft's reference claims it is part of the HTML 4.0 spec, but the HTML 4.0 spec doesn't list the onload event for <img>).

The code below is tested and working in: IE 6, 7 & 8, Firefox 2, 3 & 3.5, Opera 9 & 10, Safari 3 & 4 and Google Chrome:

<img src="yourImage.jpg" border="0" height="real_height" width="real_width"
    onload="resizeImg(this, 200, 100);">

<script type="text/javascript">
function resizeImg(img, height, width) {
    img.height = height;
    img.width = width;
}
</script>

Upvotes: 11

Colin O&#39;Dell
Colin O&#39;Dell

Reputation: 8657

You can change the actual width/height attributes like this:

var theImg = document.getElementById('theImgId');
theImg.height = 150;
theImg.width = 150;

Upvotes: 22

Pat
Pat

Reputation: 25685

Once you have a reference to your image, you can set its height and width like so:

var yourImg = document.getElementById('yourImgId');
if(yourImg && yourImg.style) {
    yourImg.style.height = '100px';
    yourImg.style.width = '200px';
}

In the html, it would look like this:

<img src="src/to/your/img.jpg" id="yourImgId" alt="alt tags are key!"/>

Upvotes: 91

Related Questions