Jcrop与ntervention/image 实现图片的剪辑

参考链接 https://github.com/tapmodo/Jcrop

分析:

    实现剪辑功能的是 public Intervention\Image\Image crop(int $width, int $height, [int $x, int $y])

    而 Jcrop提供参数

解决:

    1. 引入jcorp  

            

             

    2.编辑的图片加上Id

<img src="{{ \Auth::user()->avatar }}" class="ui centered image" id="cropbox">

 3.  调用:
       

cropBox.Jcrop({
    aspectRatio: 1, //  裁剪框的
    onSelect: updateCoords, //选中裁剪框的事件 在这个函数中可以随时获取当前的 width height x y；
    setSelect: [120,120,10,100]
});

function updateCoords(c) //将这些参数传递出去就可以了 
{
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
}

eg:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document" aria-hidden="true">
        <div class="modal-content">
            {!! Form::open( [ 'url' => ['/crop/api'], 'method' => 'POST', 'onsubmit'=>'return checkCoords();','files' => true ] ) !!}
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" style="color: #ffffff">×span>button>
                <h4 class="modal-title" id="exampleModalLabel">裁剪头像h4>
            div>
            <div class="modal-body">
                <div class="content">
                    <div class="crop-image-wrapper">
                        <img
                                src="{{ \Auth::user()->avatar }}"
                                class="ui centered image" id="cropbox" >
                        <input type="hidden" id="photo" name="photo" />
                        <input type="hidden" id="x" name="x" />
                        <input type="hidden" id="y" name="y" />
                        <input type="hidden" id="w" name="w" />
                        <input type="hidden" id="h" name="h" />
                    div>
                div>

            div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消button>
                <button type="submit" class="btn btn-primary">裁剪头像button>
            div>
            {!! Form::close() !!}
        div>
    div>
div>

var cropBox = $("#cropbox");
cropBox.attr('src',response.avatar);
$('#photo').val(response.avatar);
$('#upload-avatar').html('更换新头像');
$('#avatar-login').attr('src', response.avatar);
$('#exampleModal').modal('show');
cropBox.Jcrop({
    aspectRatio: 1, //  裁剪框的
    onSelect: updateCoords,
    setSelect: [120,120,10,100]
});
$('.jcrop-holder img').attr('src',response.avatar);

function updateCoords(c)
{
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
}

function checkCoords()
{
    if (parseInt($('#w').val())) return true;
    alert('请选择图片.');
    return false;
}