179 lines
6.6 KiB
PHP
179 lines
6.6 KiB
PHP
<div>
|
|
<style>
|
|
.modal-dialog {
|
|
position: relative;
|
|
display: table;
|
|
overflow: auto;
|
|
width: auto;
|
|
min-width: 300px;
|
|
}
|
|
.modal-body { /* Restrict Modal width to 90% */
|
|
overflow-x: auto !important;
|
|
max-width: 90vw !important;
|
|
}
|
|
</style>
|
|
|
|
<style type="text/css">
|
|
.jcrop-holder #preview-pane {
|
|
display: block;
|
|
position: absolute;
|
|
z-index: 2000;
|
|
top: 10px;
|
|
right: -280px;
|
|
padding: 6px;
|
|
border: 1px rgba(0,0,0,.4) solid;
|
|
background-color: white;
|
|
|
|
-webkit-border-radius: 6px;
|
|
-moz-border-radius: 6px;
|
|
border-radius: 6px;
|
|
|
|
-webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
|
|
-moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
|
|
box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* The Javascript code will set the aspect ratio of the crop
|
|
area based on the size of the thumbnail preview,
|
|
specified here */
|
|
#preview-pane .preview-container {
|
|
width: auto;
|
|
height: 200px !important;
|
|
overflow: hidden;
|
|
opacity: .4;
|
|
}
|
|
</style>
|
|
|
|
<div class="modal fade" id="modaljcrop" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel">Crop Image</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="preview-container">
|
|
<img id="cropImage" class="crop" />
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<input type="hidden" id="imageX" name="imageX" />
|
|
<input type="hidden" id="imageY" name="imageY" />
|
|
<input type="hidden" id="imageW" name="imageW" />
|
|
<input type="hidden" id="imageH" name="imageH" />
|
|
|
|
<button type="button" class="btn btn-primary float-left button-edit-crop" style="margin-top:18px;display:none;position:absolute" data-toggle="modal" data-target="#modaljcrop">
|
|
<i class="fal fa-pencil" aria-hidden="true"></i>
|
|
Edit Crop Image
|
|
</button>
|
|
|
|
@section('scripts_comp')
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/2.0.4/css/Jcrop.min.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/2.0.4/js/Jcrop.min.js"></script>
|
|
|
|
<script>
|
|
function updateCoords(c)
|
|
{
|
|
if ($('#preview-pane').length) {
|
|
$preview = $('#preview-pane');
|
|
$pcnt = $('#preview-pane .preview-container');
|
|
$pimg = $('#preview-pane .preview-container img');
|
|
|
|
xsize = $pcnt.width();
|
|
ysize = $pcnt.height();
|
|
|
|
var rx = xsize / c.w;
|
|
var ry = ysize / c.h;
|
|
|
|
var realW = $('#cropImage').width();
|
|
var realH = $('#cropImage').height();
|
|
|
|
if (realW == 0 || realH == 0) {
|
|
var imageAjust = new Image();
|
|
|
|
imageAjust.src = $('#cropImage').attr('src');
|
|
|
|
var realW = imageAjust.width;
|
|
var realH = imageAjust.height;
|
|
}
|
|
|
|
$pimg.css({
|
|
width: Math.round(rx * realW) + 'px',
|
|
height: Math.round(ry * realH) + 'px',
|
|
marginLeft: '-' + Math.round(rx * c.x) + 'px',
|
|
marginTop: '-' + Math.round(ry * c.y) + 'px'
|
|
});
|
|
}
|
|
|
|
$('#imageX').val(c.x);
|
|
$('#imageY').val(c.y);
|
|
$('#imageW').val(c.w);
|
|
$('#imageH').val(c.h);
|
|
};
|
|
|
|
document.getElementById('{{ $fileID }}').addEventListener('change', readURL, true);
|
|
|
|
function readURL(){
|
|
var file = document.getElementById("{{ $fileID }}").files[0];
|
|
|
|
var reader = new FileReader();
|
|
|
|
reader.onload = function(e){
|
|
var image = new Image();
|
|
|
|
image.src = e.target.result;
|
|
|
|
$('.jcrop-preview').removeClass('h-100');
|
|
$('.jcrop-preview').removeClass('w-100');
|
|
|
|
$('#jcrop-preview').attr('src', e.target.result);
|
|
|
|
image.onload = function() {
|
|
if ($('#cropImage').data('Jcrop')) {
|
|
$('#cropImage').data('Jcrop').destroy();
|
|
}
|
|
|
|
$('#modaljcrop').modal('show');
|
|
|
|
$('#cropImage').click();
|
|
|
|
$('#modaljcrop').on('hidden.bs.modal', function () {
|
|
$('.button-edit-crop').css('display', 'block');
|
|
});
|
|
|
|
$('#cropImage').attr('src', e.target.result);
|
|
var x = this.width/2 - this.width/2;
|
|
var y = this.height/2 - this.height/2;
|
|
var x1 = x + this.width;
|
|
var y1 = y + this.width;
|
|
|
|
$('.crop').Jcrop({
|
|
onSelect: updateCoords,
|
|
onChange: updateCoords,
|
|
bgOpacity: .5,
|
|
setSelect: [0, 0, x1, y1],
|
|
aspectRatio: 2
|
|
});
|
|
};
|
|
}
|
|
|
|
if (file) {
|
|
reader.readAsDataURL(file);
|
|
} else {
|
|
//
|
|
}
|
|
}
|
|
</script>
|
|
@endsection
|
|
</div> |