관리-도구
편집 파일: crop.blade.php
<div class="row no-gutters"> <div class="col-xl-8"> <div class="crop-container"> <img src="{{ $img->url . '?timestamp=' . $img->time }}" class="img img-responsive"> </div> </div> <div class="col-xl-4"> <div class="text-center"> <div class="img-preview center-block"></div> <br> <div class="btn-group clearfix"> <label class="btn btn-info btn-aspectRatio active" onclick="changeAspectRatio(this, 16 / 9)"> 16:9 </label> <label class="btn btn-info btn-aspectRatio" onclick="changeAspectRatio(this, 4 / 3)"> 4:3 </label> <label class="btn btn-info btn-aspectRatio" onclick="changeAspectRatio(this, 1)"> 1:1 </label> <label class="btn btn-info btn-aspectRatio" onclick="changeAspectRatio(this, 2 / 3)"> 2:3 </label> <label class="btn btn-info btn-aspectRatio" onclick="changeAspectRatio(this, null)"> {{ trans('laravel-filemanager::lfm.btn-crop-free') }} </label> </div> <br> <br> <div class="btn-group clearfix"> <button class="btn btn-secondary" onclick="loadItems()">{{ trans('laravel-filemanager::lfm.btn-cancel') }}</button> <button class="btn btn-warning" onclick="performCropNew()">{{ trans('laravel-filemanager::lfm.btn-copy-crop') }}</button> <button class="btn btn-primary" onclick="performCrop()">{{ trans('laravel-filemanager::lfm.btn-crop') }}</button> </div> <form id='cropForm'> <input type="hidden" id="img" name="img" value="{{ $img->name }}"> <input type="hidden" id="working_dir" name="working_dir" value="{{ $working_dir }}"> <input type="hidden" id="dataX" name="dataX"> <input type="hidden" id="dataY" name="dataY"> <input type="hidden" id="dataWidth" name="dataWidth"> <input type="hidden" id="dataHeight" name="dataHeight"> <input type='hidden' name='_token' value='{{csrf_token()}}'> </form> </div> </div> </div> <script> var $image = null, options = {}; $(document).ready(function () { var $dataX = $('#dataX'), $dataY = $('#dataY'), $dataHeight = $('#dataHeight'), $dataWidth = $('#dataWidth'); $image = $('.crop-container > img'); options = { aspectRatio: 16 / 9, preview: ".img-preview", strict: false, crop: function (data) { // Output the result data for cropping image. $dataX.val(Math.round(data.x)); $dataY.val(Math.round(data.y)); $dataHeight.val(Math.round(data.height)); $dataWidth.val(Math.round(data.width)); } }; $image.cropper(options); }); function changeAspectRatio(_this, aspectRatio) { options.aspectRatio = aspectRatio; $('.btn-aspectRatio.active').removeClass('active'); $(_this).addClass('active'); $('.img-preview').removeAttr('style'); $image.cropper('destroy').cropper(options); return false; } function performCrop() { performLfmRequest('cropimage', { img: $("#img").val(), working_dir: $("#working_dir").val(), dataX: $("#dataX").val(), dataY: $("#dataY").val(), dataHeight: $("#dataHeight").val(), dataWidth: $("#dataWidth").val(), type: $('#type').val() }).done(loadItems); } function performCropNew() { performLfmRequest('cropnewimage', { img: $("#img").val(), working_dir: $("#working_dir").val(), dataX: $("#dataX").val(), dataY: $("#dataY").val(), dataHeight: $("#dataHeight").val(), dataWidth: $("#dataWidth").val(), type: $('#type').val() }).done(loadItems); } </script>