Jcrop 图像干预 Laravel 5

Posted 2023-02-25

【中文标题】Jcrop 图像干预 Laravel 5

【英文标题】：Jcrop Image Intervention Laravel 5

【发布时间】：2017-07-21 07:44:22

【问题描述】：

我正在使用图像干预和 jcrop 在 laravel 中裁剪和调整图像大小，但是遇到了问题。我认为的问题是，当我根据选择保存文件的宽度和高度时正确，但 x & 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 & y 不正确。

【参考方案1】：

是的，我得到了答案。问题很简单，图像的 x 和 y 位置是错误的，因为它位于引导响应类中。正确的解决方案就是删除类。因此将显示图像实际尺寸。而不是选择是。就是这样。

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

这应该是

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