javascript - Resize image and maintain overlay positions

Question

I am resizing an image in Javascript to have the image fill the parent container, with its correct aspect ratio. On top of that image i have items that i need to overlay on the image with specific coordinates.

• Original image size is: 654px X 418px
• On top of that image i overlay a few other canvas items at exact coordinates, 56px X 82px
• I resize the image, keeping correct aspect ratio of 1.56

---

• Image container to scale too: 1672px X 829px
• New image size with correct aspect ratio: 1297px X 829px
• How do i calculate where the new canvas overlay coordinates are??

Answer 1

You can use the properties of the image element to determine the scaling factor to apply to the overlay items.

The intrinsic (unscaled) dimensions of an image are:

const unscaledWidth = img.naturalWidth,
  unscaledHeight = img.naturalHeight;

The dimensions of the image as drawn are:

const scaledWidth = img.offsetWidth,
  scaledHeight = img.offsetHeight;

The scaling factors are thus:

const scaleX = scaledWidth / unscaledWidth,
  scaleY = scaledHeight / unscaledHeight;

Ref:

• HTMLImageElement.naturalWidth
• HTMLImageElement.naturalHeight
• HTMLElement.offsetWidth
• HTMLElement.offsetHeight