0

In my website I have a component where users are able to upload an avatar. When the avatar is dragged into the placeholder or added via the file input an preview of the image will appear. Besides a small overlay with tools are appearing as well to crop, zoom or rotate the image.

This all works fine, via desktop browsers no problems at all but the problem appears when I start scrolling in my window via an iPhone (iOS). Somehow the function is executed and somehow the image coordinates of cropping and zoom are reset. When I scroll with very small hops it seems to be ok.

The library I am using is jQcrop, I have wrapped this one into a function which I initialize on placeholder change.

For example;

function cropFrame(debugMsg) {
     console.log(debugMsg);
     $('img.cropImage').jQcrop({
         width: 175,
         height: 175,
         zoom : 60
      }).on('crop.jQcrop', function(e, data) {
         console.log('cropping');
         $('#avatarX').val(data.cropX);
         $('#avatarY').val(data.cropY);
         $('#avatarH').val(data.cropH);
         $('#avatarW').val(data.cropW);
      });
}

$('#upload').on('drop', function (e) {
    ..// code for dropped image
    cropFrame('On avatar drop change');
});

$(document).on('change', '#avatar', function(e) {
  ..// code for changed image
  setCropFrame('On avatar change');
});

What I see while debugging my iPhone via Safari, the 'cropping' console log is firing even when I don't touch the img.cropImage.

Any ideas?

directory
  • 3,093
  • 8
  • 45
  • 85
  • I think the issue is here that jQcrop uses mousedown and mouseup event handlers which iOS interprets as clicks, see http://stackoverflow.com/a/3303839/926978 – Lennart May 17 '17 at 13:47
  • The problem was inside the library, the functions are attached to the 'document', when you change this to the .cropFrame class name it all works well. Took me a while to debug but found it. – directory Jun 22 '17 at 15:27

0 Answers0