Question

在我的网站中，我有一个用户可以上传头像的组件。将头像拖入占位符或通过文件输入添加时，将显示图像的预览。此外，还会出现带有工具的小型叠加层，以便裁剪，缩放或旋转图像。

这一切都很好，通过桌面浏览器没有任何问题，但当我开始通过iPhone（iOS）在我的窗口滚动时出现问题。以某种方式执行该功能，并以某种方式重置裁剪和缩放的图像坐标。当我用非常小的跃点滚动时，似乎没问题。

我正在使用的库是jQcrop，我将这个包装到一个函数中，我在占位符更改时初始化。

例如;

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');
});

通过Safari调试我的iPhone时所看到的，＆＃39;裁剪＆＃39;即使我没有触摸img.cropImage，控制台日志也会触发。

有什么想法吗？

防止在移动滚动上执行jQuery函数

0 个答案: