I'm working on an image cropping tool with use of cropper-js (made by fengyuanchen). It's an awesome tool and everything works perfect, except for one thing and I'm not sure if I miss 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:
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.
Can anyone help with this matter?