Center canvas on (fullscreen) page

[IJsLauw]

Is there a way to always start with the image/canvas always in the center of the page voor different image dimensions?

I open the page fullscreen and can't position the image the way I want, only using the offset, somehow, but that differs per image dimensions of course.

[gkTim]

Hi,

I had the same problem and used the following solution:

const width = ref(0);
const height = ref(0);

function fit() {
  visible.value = false;
  transform.value = { x: 0, y: 0, scale: 1, rotate: 0 };
  visible.value = true;
}

onMounted(() => {
  const img = new Image();

  img.onload = function () {
    width.value = img.width;
    height.value = img.height;
    setTimeout(() => fit(), 300);
  };

  img.src = fileUrl.value!;
});

width and height ref are used to set the width and height of the zoompinch component.