How to achieve this cropper?

[9mm]

Hey, I really love this cropper so far - excellent work (I'm using the Vue 3 version).

I have it about 80% to my liking but there are 2 areas I'm still investigating and I'm wondering if you could give your expert opinion on how to solve this.

1. How can I completely disable all zooming? All the examples I find from other issues still have zooming. I just want to disable it all (which leads to point 2)
2. How do I make the cropper show everything on the screen at once? I'm going to be putting it in a modal which should be set at max-height: 80vh and max-width: 80vw, but really any way to make the modal "fit" would work. The problem is making the cropper understand it's parent size, and then scaling.

[Norserium]

How can I completely disable all zooming?

Could you explain what it means? You can disable zoom by touch and mouse wheel. Yes, it won't guarantee that any possible zoom will be disabled, but at least something.

[9mm]

Basically the image should never change size. It's just a fixed image. In my gif, even though you can't see it, I'm moving the scroll wheel and the image is not changing size.

This also means however that the whole cropper needs to be visible at once so they can access all areas of it.

Did I explain it better?

[Norserium]

Thanks. I assume, that you encounter the described problem when the cropper "cuts" some parts of image instead of reducing its size (during window resize)?

[9mm]

No, I haven't even gotten to the part where I use the cropper output, I'm still just styling it. The problem is I literally just dont want the image to get bigger and smaller as I think it's very jarring to the user experience. It offers a higher granularity of cropping at the cost of things moving too much and being disruptive (for my use case anyway).

I always want the image to fit on the screen, and the most they can do is move the stencil around, and if they're trying to create a crop which is really small, then they simply lose their precision (I'm fine with this, as the benefits outweigh this con).

I have tried adding the disable zoom props but I could still zoom... maybe I did it wrong? Where does it go in here?

        <cropper
          ref="cropper"
          v-if="imageData.src"
          :src="imageData.src"
          :debounce="500"
          :min-width="formattedValidations.width"
          :min-height="formattedValidations.height"
          image-restriction="fit-area"
          :stencil-props="{
            aspectRatio: formattedValidations.width / formattedValidations.height,
          }"
          class="photoshop-grid"
        />

[Norserium]

@9mm, I assume you want to obtain this behavior?

[9mm]

Yes!! Thats awesome! I have one more (way more fun) challenge but let me add it into your code sandbox.

[9mm]

You are like the crop 👑

[Norserium]

Yes!! Thats awesome!

Ironically, but a long time ago something like it was the default behavior (when zoom was not supported at all).

I have one more (way more fun) challenge but let me add it into your code sandbox.

It's interesting.

[9mm]

ha 🤣

I'm just modifying this code sandbox quick to show you something

[9mm]

Ok I edited this code sandbox to show my use case. Its supposed to be emulating a modal popup.

Theres 2 demo images in the image: key which demonstrate both points below.

Goals:

1. I added a Photoshop-style background grid that should only show for images with transparency (the Apple Jacks image). You will notice however that the background grid doesnt line up. I want the grid to be "lit up" just like the image (no dark overlay within stencil). Now the background image is changing scale along with the image. It should line up with the background grid.
2. The modal seems to be taking up 100% vertical and horizontal space whenever possible. I want those to be max-widths and not actual widths. I'm trying to get the modal to simply match the size of the image when possible (see my original gif, how the modal always matches the image size, and they both scale together).

https://codesandbox.io/s/vue-advanced-cropper-static-visible-area-forked-ui4ux?file=/src/App.vue

[Norserium]

The modal seems to be taking up 100% vertical and horizontal space whenever possible. I want those to be max-widths and not actual widths. I'm trying to get the modal to simply match the size of the image when possible (see my original gif, how the modal always matches the image size, and they both scale together).

I don't get it.

You have set:

.wrapper {
  width: 100vw;
  height: 100vh;
  ...
}

[9mm]

Thats simply the wrapper which contains the modal, not the modal itself. The .wrapper class typically has a 50% opacity background so the user can't click other elements, and it must be full size as it's meant to cover the whole screen over-top of the current content on the page.

It's the .modal box which is the actual modal itself which needs to center within that 100% w/h space, and only take up as much room as it needs.

If the wrapper were not 100% width and height then the modal couldn't be vertically and horizontally centered.

[Norserium]

I added a Photoshop-style background grid that should only show for images with transparency (the Apple Jacks image). You will notice however that the background grid doesnt line up. I want the grid to be "lit up" just like the image (no dark overlay within stencil). Now the background image is changing scale along with the image. It should line up with the background grid.

It's a tough one. I can offer you only a workaround now. Moreover, all solutions, that I can make up now, will look conceptually like it.

[Norserium]

I'm trying to get the modal to simply match the size of the image when possible (see my original gif, how the modal always matches the image size, and they both scale together).

Could you draw some examples, that illustrate your desired result?

[9mm]

Wow the background workaround is incredible, that's perfect. And sure, let me draw.

[9mm]

Example 1 (image with transparency)

ACTUAL:

GOAL

Example 2 (image with no transparency)

ACTUAL:

GOAL:

[9mm]

One more example where small images already work correctly (images which don't need to be resized to fit within the browser window)

[Norserium]

Try this.

[9mm]

🙏🏼 🙏🏼 Dude you are Legend 🙏🏼 🙏🏼

Do you have one of those links where I buy you a coffee?

[9mm]

I will try it out shortly, it looks really close if not dead on at first glance 😆

[Norserium]

Do you have one of those links where I buy you a coffee?

Currently there is no such link. But thank you for the wish.

[9mm]

You are so awesome, I am eternally grateful. Both solutions work perfectly.

Only one small revision for anyone that finds this, the bottom line of last example should be this instead:

stretcher.style.height = `${cropper.clientWidth / ratio}px`;

[Norserium]

@9mm, yeah, it's the misspell. Fixed.

[Norserium]

I assume the issue may be closed?

[9mm]

Yeah! It works really, really well. Thanks so much, you are the bomb 😎

[Norserium]

You are welcome!