在我的网站中,我有一个用户可以上传头像的组件。将头像拖入占位符或通过文件输入添加时,将显示图像的预览。此外,还会出现带有工具的小型叠加层,以便裁剪,缩放或旋转图像。
这一切都很好,通过桌面浏览器没有任何问题,但当我开始通过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时所看到的,'裁剪'即使我没有触摸img.cropImage,控制台日志也会触发。
有什么想法吗?