Show image only inside cropping-area

[Mazeland]

Hi,

I'm working on an image cropping tool and cropperjs is an awesome tool for this. Everything works perfect, except for one thing and I'm not sure if this is a missing feature or I missed something in the settings

The user should be able to move the image (instead of a movable cropping-area). The cropping-area is a responsive square and the image should only be visible inside the cropping-area. Now the image is visible inside and outside the cropping-area. I would like to have the edges removed (when the image is in portrait mode, the edges are at the top/bottom).

Examples: Landscape: https://i.imgur.com/4Luaw9T.png Portrait: https://i.imgur.com/QOCfDya.png

The settings I use at the moment are: drag-mode = move guides = false view-mode = 1 background = false autoCropArea = 1 cropBoxMovable = false cropBoxResizable = false modal = false (with the image examples I turned this to true for a better view of the issue) center = false highlight = false aspectRatio = 1

It's possible to hide the edges with css (class cropper-canvas), but that leaves white space on each side and with portrait images these white spaces are at the top/bottom.

I tried to solve it with this issue, but no success: https://github.com/fengyuanchen/cropper/issues/755

Is this a missing feature or did I miss something in the settings?

Thank you in advance.

[fengyuanchen]

You can try to set the opacity of the "outside" image by this:

.cropper-canvas > img {
  opacity: 0;
}

[Mazeland]

Thank you for your answer. This solution still leaves margin on both sides. When you hover over these margins and scroll, the image will zoom. Is there a way to disable that?

[fengyuanchen]

Set the zoomable option to false.

[Mazeland]

Thanks again for your answer. The zoomable option has to stay true. Maybe my explanation was not clear, sorry for that. In the screenshot below you can see the white spaces on the side (and for portrait images this is at the top and bottom). Is there a way to remove these white spaces so the cropper-container will be as big as the cropper-crop-box?

Screenshot: https://i.imgur.com/IH5iVKS.jpg

[fengyuanchen]

@Mazeland What you need may be a responsive container, follow this example please: https://fengyuanchen.github.io/cropperjs/examples/responsive-container.html

[Mazeland]

Thnx for your answer fengyuanchen. The problem is solved with use of viewport-width and viewport-height settings on the img-container 👍