I'm using the fengyuanchen/cropper.js for a project.
It works great until I load a picture on any Smartphone. It depends on the size the image has, if you hit the area outside of the crop area the browser crashes.
I initialize the cropper in the following lines:
function initCropper(aspectRatio)
{
jQuery('#imagePath').val(jQuery('#cropContainer').attr('src'));
cropper = jQuery('#cropContainer').cropper({
aspectRatio: aspectRatio,
toggleDragModeOnDblclick: false,
zoomable: false,
movable: false,
scalable: false,
zoomOnTouch: false,
zoomOnWheel: false,
dragMode: 'none',
crop: function(e) {
jQuery('#imageX').val(e.x);
jQuery('#imageY').val(e.y);
jQuery('#imageWidth').val(e.width);
jQuery('#imageHeight').val(e.height);
jQuery('#imageRotate').val(e.rotate);
}
});
}
Here is the block in my blade:
<div id="imgContainer" class="dashboard-profile-img-plugin" style="display: none;">
<img src="" style="width: 100%; height: 100%;" id="cropContainer">
</div>
<br>
<div id="cropControls" class="dashboard-profile-img-plugin" style="display: none;">
<a class="btn-sm btn-comangi" id="turnleft" style="color: white;"><i class="fa fa-undo" aria-hidden="true"></i></a>
<a class="btn-sm btn-comangi" id="turnright" style="color: white;"><i class="fa fa-repeat" aria-hidden="true"></i></a>
<span class="btn-sm btn-comangi" id="cropp_image" style="color: white;"><i class="fa fa-crop" aria-hidden="true"></i> </span>
<span class="btn-sm btn-danger" id="delete_image" style="color: white;"><i class="fa fa-trash" aria-hidden="true"></i></span>
<span class="btn-sm btn-danger" id="cancel_image" style="color: white;"><i class="fa fa-remove" aria-hidden="true"></i></span>
</div>
I'm using the latest version of the cropper and the image is passed in base64. The project is running with Laravel 5.1 and PHP 7.0.
Anybody can help me?
via Sacrifyser