finger interaction is poor (randomly not working) on mobile

[subatomicglue]

Seems like 1/2 of the time the crop controls work on mobile, 1/2 the time they dont.

• tap-drag on the center to move doesn't move
• tap-drag on a corner to resize doesn't resize
• pinch zoom seems to work, but not useful if the others dont work. (I'd GLADLY give up pinch zoom if the other 2 worked consistently)

Any advice for getting mobile working better? Running on iOS / MobileSafari on Apple iPhone 6+, X

We had the same problems on the older ng2-img-cropper. For about a year now. We're close to writing our own javascript/canvas based image cropper so we can control these things better.

Angular 5.2, angular-cli 1.7.1, ngx-img-cropper 0.10.4

[subatomicglue]

Noticed there are settings for touch size, these seem to (slightly) improve the experience:

    // improve touch response:
    this.cropperSettings.markerSizeMultiplier = 3; // default 1
    this.cropperSettings.touchRadius = 40; // default 20
    this.cropperSettings.centerTouchRadius = 40; // default 20

Now:

• tap-drag on the center sometimes resizes crop rectangle, sometimes moves
• tap-drag on top/left corner resizes the crop rectangle
• tap-drag on bottom/right corner moves the crop rectangle
• tap-drag on top/right or bottom/left corner does nothing

cropper area is 300x300px, and the touch points are 40x40. iPhone 6+

[subatomicglue]

My configuration:

    this.cropperSettings.canvasWidth = '300px';
    this.cropperSettings.canvasHeight = '300px';
    this.cropperSettings.noFileInput = true;
    this.cropperSettings.keepAspect = true;

    // touch
    this.cropperSettings.touchRadius = 40;
    this.cropperSettings.centerTouchRadius = 40;
    this.cropperSettings.markerSizeMultiplier = 3;
    this.cropperSettings.showCenterMarker = true;

    // resulting output image size / quality (500x500px with 80% quality == ~45k jpeg)
    this.cropperSettings.croppedWidth = 500;
    this.cropperSettings.croppedHeight = 500;
    this.cropperSettings.compressRatio = 0.8;
    this.cropperSettings.preserveSize = false; // false: use croppedWidth, croppedHeight
    this.cropperSettings.minWithRelativeToResolution = true;

[subatomicglue]

Looks like my media breakpoints are screwing it up, because the original config is 300px (see above), the touch calculation is done in the 300x300 space, even when the smaller screen makes the canvas resize down to 150x150px - soooo, tapping in the lower right corner of the 150x150 square, is actually the center of the configured 300x300px space!

(Would be nice to have the touch interaction respond to the real CSS element size!)

@include media-breakpoint-down(sm) {
  .cropper-wrapper {
    width: 150px;
  }
  :host ::ng-deep img-cropper {
    canvas {
      width: 150px;
      height: 150px;
    }
  }
}

for context, this is the html:

<div class='cropper-wrapper'>
      <img-cropper *ngIf="!uploading" [hidden]="!data.image" #cropper [image]="data" 
           [settings]="cropperSettings" (cropPositionChange)="cropPositionChange($event)">
      </img-cropper>
</div>

[web-dave]

This issue has been automatically closed due to inactivity. Thank you for your contributions.