Tuesday, March 14, 2017

Cropper.js crashes browser iOS/Android, Laravel 5.1

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>
                                &nbsp;<a class="btn-sm btn-comangi" id="turnright" style="color: white;"><i class="fa fa-repeat" aria-hidden="true"></i></a>
                                &nbsp;<span class="btn-sm btn-comangi" id="cropp_image" style="color: white;"><i class="fa fa-crop" aria-hidden="true"></i> </span>
                                &nbsp;<span class="btn-sm btn-danger" id="delete_image" style="color: white;"><i class="fa fa-trash" aria-hidden="true"></i></span>
                                &nbsp;<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

Advertisement