naturalWidth and naturalHeigth image property

Andrea08 · October 29, 2023, 6:47pm

Hello,
is there a way to get the original size of a tumult hype image element?
I need to load different images with different size keeping a specific height value.
So I need to calculate the width and I need the origina w/h ratio.

Thanks,
Andrea.

P.S
I'd like to not using promises like this:

function loadImageSize (path) {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.src = path
    img.onload = () => {
      resolve({"w":img.width, "h":img.height})     
    }
    img.onerror = e => {
      reject(e)
    }
  })
}

MarkHunte · October 29, 2023, 9:24pm

The problem likely is that the image needs to be an image object/node.
Hypes images are divs with background images.

If you load the image into an image object's source then you can access the images naturalHeight/width properties.

Here is an example

We have a Hype Rectangle with an img block and empty src in its innerHTML

<img class="image2" src="">

We load this function On Prepare For Display or On Scene Load.

	const output = document.querySelector("#pre");
	const image = document.querySelector(".image2"); 

	
image.addEventListener("load", (event) => {

console.log("loaded")
  const { naturalWidth, naturalHeight, width, height } = image;
  output.textContent = `
Natural size: ${naturalWidth} x ${naturalHeight} pixels
Displayed size: ${width} x ${height} pixels
`;
});

And later load the image src.
In this example by button click to run a simple load image

(note the image in the example is constrained by css styles)

const image = document.querySelector(".image2"); 


image.src = "${resourcesFolderName}/clock-demo-400px.png"

imaNat1 copy.zip (108.9 KB)