分析:
实现剪辑功能的是 public Intervention\Image\Image crop(int $width, int $height, [int $x, int $y])
而 Jcrop提供参数
解决:
1. 引入jcorp
<link href="/css/jquery.Jcrop.min.css?v=1.01" rel="stylesheet">
<script src="/js/jquery.Jcrop.min.js?version=1.01"></script>
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; }