iPad scrolling not working

[satyaki1]

I used the cropping tool to crop images at the end of my form. When I run it on iPad , after loading the photo the default iPad scrolling is getting blocked, making my application freeze .Though controls of the image cropping tool is working fine.

[zxl9171]

Same here. Any touch screen devices have this problem.

[satyaki1]

I have got the solution put - e.preventDefault(); at the start of

onTouchStart

event.

[vmnikhil]

canvas width="500" height="300" id="canvas" image-cropper image="imgUrl" cropped-image="myCroppedImage" crop-width="400" crop-height="200" min-width="100" min-height="50" keep-aspect="true"></canvas

Iam doing like this and added e.preventDefault(); onTochStart.But cropping controlls not working on Ipad

[satyaki1]

@nikhilvm1993 -
To make the cropping tool work on your iPad -
replace e.touches with e.originalEvent.touches in onTouchMove and replace e.changedTouches with e.originalEvent.changedTouches in onTouchEnd.

Like this -

if (e.originalEvent.touches.length >= 1) {
 for (var i = 0; i < e.originalEvent.touches.length; i++) {
   var touch = e.originalEvent.touches[i];

and,

for (var i = 0; i < e.originalEvent.changedTouches.length; i++) {
 var touch = e.originalEvent.changedTouches[i];

Please let me know if it still does not work because it worked for me perfectly!

[vmnikhil]

@satyaki1 its worked,Thanks

[ejrudy]

Having the same issue right now, and i've tried the code above to no avail. Anyone have a solution to this? As soon as an image is loaded in to crop, scrolling ceases to function on any iOS browser.

[satyaki1]

@ejrudy hi, I hope you have not forget to add e.preventDefault(); at the start of

onTouchStart

along with the code changes I provided above. I have tested the above code in iOS 7 to 8, and its working fine.

[raykudo]

onTouchStart

ImageCropper.prototype.onTouchStart = function (e) {
    e.preventDefault();
    if (crop.isImageSet()) {
        this.isMouseDown = true;
    }
};

onTouchMove

if (e.originalEvent.touches.length >= 1) {
    for (var i = 0; i < e.originalEvent.touches.length; i++) {
        var touch = e.originalEvent.touches[i];

onTouchEnd

for (var i = 0; i < e.originalEvent.changedTouches.length; i++) {
    var touch = e.originalEvent.changedTouches[i];

add e.preventDefault before onTouchStart and changed onTouchMove and onTouchEnd but not working in iOS 9.

[raykudo]

worked by #76. @ejrudy check this out.

[nupur1]

Same issue but the above solution did not work for me

[mandudeboy]

@nupur1 we also faced issues when following @satyaki1 instructions, but we found that removing the e.preventDefault() call in the "onTouchMove()" method solved it completely! Even so this is still not optimal for touch devices for different reasons, but it works OK.

In conclusion, To make this code work 'ok' with scroll for touch devices:

ImageCropper.prototype.onTouchStart = function (e) {
    e.preventDefault();
    if (crop.isImageSet()) {
        this.isMouseDown = true;
    }

ImageCropper.prototype.onTouchEnd = function (e) {
    if (crop.isImageSet()) {
        for (var i = 0; i < e.originalEvent.changedTouches.length; i++) {
            var touch = e.originalEvent.changedTouches[i];
            ...
            ...

ImageCropper.prototype.onTouchMove = function (e) {
    if (crop.isImageSet()) {
        if (e.originalEvent.touches.length >= 1) {
            for (var i = 0; i < e.originalEvent.touches.length; i++) {
                 var touch = e.originalEvent.touches[i];
                 ...
                 ...