Can I get background-image source's size by javascript?

Question

always thanks for everyone of stackoverflow

I made a div and it includes background-image: url(imageURL) such like this codes

HTML >
<div ref={mapRef} className="image-container" style={{ backgroundPosition: '0 0' }} >
    {markersState}
</div>

CSS >
.image-container {
  width: 1024px;
  height: 768px;

  cursor: grab;
  user-select: none;

  background-image: url("/images/map.png");
  background-position: 0 0;
  background-repeat: no-repeat;
}

I want to get background-image source(='/images/map.png')'s size How can I get it? (source's width: 2907px, height: '3460px')

if I need to use instead of background-image, that solution can be good for me Also, is there good library, recommend me please

Thank you, have a nice day

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle — Phix, Oct 20 '21 at 16:22
Good question! But repeated; hope this helps. https://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript — BGPHiJACK, Oct 20 '21 at 16:22
@blanknamefornow thanks a lot but both returns 52(:number) the image source's width is 2907px — Minseo Lee, Oct 20 '21 at 16:28
The background image would need to be rendered in as data to see these values and if they appear incorrect its due to spoofing of the images EXIF/HEADERS which is a different thing. In production we don't worry about this, we resize all images to our clouds and CDN it to nearest user the respectful resolutions (fixed). Bandwidth means/etc. — BGPHiJACK, Oct 20 '21 at 16:33
@Phix I've checked all attributes but there is no image source's width or height — Minseo Lee, Oct 20 '21 at 16:33
@blanknamefornow sorry, I consoled wrong. when I console img.clientWidth, it returns 1024 which is div width. I think there is no .png HEADER problem.. — Minseo Lee, Oct 20 '21 at 16:36
If you put the image into an img element you should be able to get the image's natural height and width - once it has loaded - can you give us the url to the actual image in your code. — A Haworth, Oct 20 '21 at 17:09
@AHaworth yea 'naturlWidth' worked thank you very much! I really love stackoverflow — Minseo Lee, Oct 20 '21 at 17:15

score 0 · Accepted Answer · answered Oct 20 '21 at 17:09

If you want to get the actual width and height of a background image then you can follow these steps

Get the background image's URL like this (https://stackoverflow.com/a/45010803/1391805)

var css = document.getElementById("myElem").style.backgroundImage;
var img = css.replace(/(?:^url\(["']?|["']?\)$)/g, "");

Once you have the image URL do this

var newImg = new Image();
newImg.onload = function(e) {
   console.log( this.naturalWidth ); // This is the width you are looking for
   console.log( this.naturalHeight ); // .. similarly the height.
}
newImg.src = "img.jpg";

Given the fact that this loads an image first you may want to use this carefully, if this is something that does not apply for a lot of images on a single page then this may not be a performance degrade but if the scale is larger then you may consider something better than loading an image on the client side to fetch its actual dimension.

Can I get background-image source's size by javascript?

1 Answers1