alpakas-theme/content/dashboard/components/image-crop-dashboard.blade.php

179 lines
6.6 KiB
PHP
Raw Normal View History

2021-08-26 10:02:33 +00:00
<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">&times;</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>