naturalWidth and naturalHeigth image property

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.


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 => {

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) => {

  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 (108.9 KB)

See also