4

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?

ThanhPhanLe
  • 1,315
  • 3
  • 14
  • 25
Mazeland
  • 41
  • 5

0 Answers0