Feature: pass touch events outside of cropper on mobile

Hi there,

Image cropper is working great on mobile (we use it in an ionic project)!

I have a use case where it would make sense to allow scrolling the screen view when touching the picture to be cropped outside the cropper area to scroll the mobile device view.

The attached screenshot hopefully explains the situation: the photo covers a significant part of the screen while the cropper is only covering a small part of the photo. Touching anywhere outside the cropper and dragging currently has no effect, dragging on the small (white) borders left or right of the photo works.

In Firefox I can get this behavior by removing the inline properties from the generated DOM container element (second screenshot):

• touch-action: none;
• user-select: none;

It would be great if we could enable this behavior (with an extra setup option, default off?)

[Mawi137]

By default the css for an Angular component is scoped to the component itself. So when you use the <image-cropper> inside of your component’s HTML, you can only apply styles to the image-cropper element itself, not to its child elements. For that you either need to:

• change encapsulation to ViewEncapsulation.None for that component (making its styles global)
• use ::ng-deep in your component’s styles
• put it in the global styles

[Mawi137]

Hi

You should be able to overwrite the css if you put it in the global styles.scss.

image-cropper > div {
 touch-action: auto !important;
 user-select: auto !important;
}