Jcrop Image Intervention Laravel 5

i am using Image Intervention and jcrop to crop and resize image in laravel, but having problems. The issue which i think is that , when i save the file width and height is correct according to the selection i have made but cropping area is wrong.

here is the code example.

// convert bytes into friendly format
function bytesToSize(bytes) {
    var sizes = ['Bytes', 'KB', 'MB'];
    if (bytes == 0) return 'n/a';
    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
    return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
}

// check for selected crop region
function checkForm() {
    if (parseInt($('#w').val())) return true;
    $('.setting-image-error').html('Valitse sato alue').show();
    return false;
}

// update info by cropping (onChange and onSelect events handler)
function updateInfo(e) {
    $('#x1').val(e.x);
    $('#y1').val(e.y);
    $('#x2').val(e.x2);
    $('#y2').val(e.y2);
    $('#w').val(e.w);
    $('#h').val(e.h);
}

// clear info by cropping (onRelease event handler)
function clearInfo() {
    $('#w').val('');
    $('#h').val('');
}

// Create variables (in this scope) to hold the Jcrop API and image size
var jcrop_api, boundx, boundy;

function fileSelectHandler() {

    // get selected file
    var oFile = $('#picture')[0].files[0];

    // hide all errors
    $('.setting-image-error').hide();

    // check for image type (jpg and png are allowed)
    var rFilter = /^(image\/jpeg|image\/png)$/i;
    if (!rFilter.test(oFile.type)) {
        $('.setting-image-error').html('Valitse kelvollinen kuvatiedosto (jpg ja png ovat sallittuja)').show();
        return;
    }

    // check for file size
    if (oFile.size > 10000000) {
        $('.setting-image-error').html('Kuvan koko on liian suuri, valitse pienempi kuva ').show();
        return;
    }

    // preview element
    var oImage = document.getElementById('preview');

    // prepare HTML5 FileReader
    var oReader = new FileReader();
    oReader.onload = function (e) {

        // e.target.result contains the DataURL which we can use as a source of the image
        oImage.src = e.target.result;
        oImage.onload = function () { // onload event handler

            // display step 2
            $('.setting-image-cropping-stage').fadeIn(500);

            // display some basic image info
            var sResultFileSize = bytesToSize(oFile.size);
            $('#filesize').val(sResultFileSize);
            $('#filetype').val(oFile.type);
            $('#filedim').val(oImage.naturalWidth + ' x ' + oImage.naturalHeight);

            // destroy Jcrop api if already initialized
            if (typeof jcrop_api !== 'undefined') {
                jcrop_api.destroy();
                jcrop_api = null;
                $('#preview').width(oImage.naturalWidth);
                $('#preview').height(oImage.naturalHeight);
            }
            //Scroll the page to the cropping image div
            $("html, body").animate({scrollTop: $(document).height()}, "slow");


            // initialize Jcrop
            $('#preview').Jcrop({
                minSize: [32, 32], // min crop size
                aspectRatio: 1, // keep aspect ratio 1:1
                bgFade: true, // use fade effect
                bgOpacity: .3, // fade opacity
                onChange: updateInfo,
                onSelect: updateInfo,
                onRelease: clearInfo
            }, function () {

                // use the Jcrop API to get the real image size
                var bounds = this.getBounds();
                boundx = bounds[0];
                boundy = bounds[1];

                // Store the Jcrop API in the jcrop_api variable
                jcrop_api = this;
            });


        }
    }

    // read selected file as DataURL
    oReader.readAsDataURL(oFile);
}

and Controller code is below.

public function image_crop_resize_and_upload($file, $user_id,$width,$height,$x1,$y1)
{

    $filename = $user_id . '.jpg';// image file name

    $target_path = User::PICTURE_PATH . $filename;//path where to create picture with new dimensions

    $img = \Image::make($file->getRealPath());// create the instance of image with the real path of the image

    $filetype = $img->mime();//get file mime type

    $filetypes = ['image/jpg', 'image/jpeg', 'image/png']; //allowed files types

    //if file exists in the target folder, system will delete the file and next step will create new one.
    if (File::exists($target_path)) {
        File::delete($target_path);
    }

    if (in_array($filetype, $filetypes, true)) {

        $img->crop($width, $height,$x1,$y1);

        $img->encode('jpg', 85);

        $img->resize($width,$height);

        $img->save('uploads/' . $user_id . '.jpg');

        return true;

    } else {
        return false;
    }
}

When i have the file the file width and height is correct, but the selection area, x & y is not correct.

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2ugUqyd
via IFTTT