Question

我正在使用图像干预和jcrop在laravel中裁剪和调整图像大小，但有问题。我认为的问题是，当我根据选择保存文件宽度和高度是正确的，但x＆amp; y不正确，我完全迷失在这里，不知道该怎么办，请帮忙。

我已经做了但是裁剪区域是错误的。

这是代码示例。

// 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('Select area').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('Select only jpg, png').show();
        return;
    }

    // check for file size
    if (oFile.size > 10000000) {
        $('.setting-image-error').html('Too Big file ').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);
}

和控制器代码如下。

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

当我有文件的文件宽度和高度是正确的，但选择区域，x＆amp; y不正确。

Answer 1

是的，我有答案。问题非常简单，图像的x和y位置是错误的，因为它位于引导响应类中。正确的解决方案就是删除课程。因此将显示图像实际尺寸。而不是选择。多数民众赞成。

<img id="preview" name="preview" class="img-responsive"/>

这应该是

<img id="preview" name="preview"/>

Jcrop图像干预Laravel 5

1 个答案: