Block the user from zooming the image

[floede]

I'd like a way to set something like zoomable=false on the image.
Scalable=false does that, BUT it also makes the image show up on the canvas in it's natural size.

I'd like the image to be scaled for the canvas, but disallow the user to scale / zoom afterwards.

[fengyuanchen]

Listen on the action event, call event.preventDefault() when the event.detail.action is "scale".

[floede]

Typescript will not allow me to use "event.detail.action".

I've tried this instead:

canvas?.addEventListener('action', (event) => {
  const customEvent = event as CustomEvent;
  if (customEvent.detail.action === 'scale') {
    console.log('Scale event');
  }
});

But preventDefault() does not stop the zoom.

[fengyuanchen]

Try to listen on the transform event of the CropperImage, call event.preventDefault() when the image scaling.

[floede]

I can do that, but then the Image can't scale at all, and just displays at it's natural size.
I'd like image to fit the canvas, like the default behavior.

I've tried this:

cropperCanvas?.addEventListener('action', (event) => {
const customEvent = event as CustomEvent;
if (customEvent.detail.action === 'scale') {
isUserZoom = true;
}
});

cropperImage?.addEventListener('transform', (event) => {
if (isUserZoom) {
event.preventDefault();
isUserZoom = false;
}
});

But the user can still zoom the image a step or 2, before the event is cancelled.

[volaricn]

I have the exact same problem. Tried the same things with no luck:

• setting "scalable" to false displays the image in natural size, it doesn't fit
• the "action" event has the event.detail.action is "scale" and it gets triggered, but event.preventDefault does not prevent the scale
• on the "transform" event, I can't know when it's initiated by scale or something else. So if I do preventDefault, the image doesn't fit the canvas at the beginning.

What I did find is a weird hacky fix that uses the oldMatrix data to allow it to fit the canvas initially, and then prevent it afterwards:

cropperImage?.addEventListener('transform', (event) => {
    // oldMatrix has scaleX and scaleY set to 1 until it's first set up, so using it to prevent scale/rotate/skew after that
    if (e.detail.oldMatrix[0] !== 1 && e.detail.oldMatrix[3] !== 1) {
      e.preventDefault();
    }
});

but it doesn't look as a great solution. I hope someone finds a better one

[mandalornl]

@floede and @volaricn Setting the scaleStep property to 0 on the canvas element seems to work.

const canvas = cropper.getCropperCanvas();
canvas.scaleStep = 0;