// Crop Image
@extends('layouts.app')
@section('style-css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.0/cropper.min.css">
<style>
img {
display: block;
max-width: 100%;
}
.preview {
text-align: center;
overflow: hidden;
width: 160px;
height: 160px;
margin: 10px;
border: 1px solid rgb(216, 215, 215);
max-width: 100%;
}
</style>
@endsection
@section('content')
<div class="container">
<div class="row">
<div class="col-xl-7 col-md-7 col-sm-10 mx-auto">
<div class="row">
<div class="col-12">
<h2 class="mb-3 text-center">Image Upload with Crop </h2>
<button class="btn btn-success" id="ImgModal">Upload Image + </button>
</div>
</div>
</div>
</div>
</div>
{{-- Crop Image List View --}}
<div class="container">
<div class="row mt-5">
<div class="col-xl-10 col-md-10 mx-auto">
<table class="table">
<thead>
<tr>
<th scope="col">id</th>
<th scope="col">Image</th>
</tr>
</thead>
@php
$i = 1;
@endphp
<tbody>
@foreach ($images as $item)
<tr>
<th scope="row">{{ $i++ }}</th>
<td><img src="{{ asset('upload/'.$item->name) }}" alt="" width="100" srcset=""></td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
<!--- Modal from --->
<div class="modal fade" id="modalOne" tabindex="-1" role="dialog" aria-labelledby="ModalOne" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5 text-center" id="staticBackdropLabel">Upload Image</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="img-container">
<div class="card p-4">
<form action="{{ route('image-store') }}" method="post" enctype="multipart/form-data">
@csrf
<div class="row">
<div class="col-md-8 mx-auto">
<div class="form-group mb-3">
<label class="custom-file-label mb-2" for="inputGroupFile02">Choose file</label>
<input type="file" class="image form-control" name="image" required>
<input type="hidden" name="image_base64">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
<div class="col-md-4 mx-auto">
<div class="form-group mb-3" id="targetLayer">
<img src="" style="display: none; object-fit:scale-down; vertical-align:center" class="show-image">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal for image crop -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5 text-center" id="staticBackdropLabel">Crop Image Size</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="img-container">
<div class="row ">
<div class="col-md-8">
<img class="img-fluid" id="image" width="100%" src="https://avatars0.githubusercontent.com/u/3456749">
</div>
<div class="col-md-4">
<div class="preview"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" id="crop" class="btn btn-primary">Crop</button>
</div>
</div>
</div>
</div>
@endsection
@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js"></script>
<script>
$(document).on('click','#ImgModal',function(){
$('#modalOne').modal('show');
});
</script>
<script>
var $modal = $('#modal');
var image = document.getElementById('image');
var cropper;
$("body").on("change", ".image", function(e) {
var files = e.target.files;
var done = function(url) {
image.src = url;
$modal.modal('show');
};
var reader;
var file;
var url;
// Image File Url
if (files && files.length > 0) {
file = files[0];
if (URL) {
done(URL.createObjectURL(file));
} else if (FileReader) {
reader = new FileReader();
reader.onload = function(e) {
done(reader.result);
};
reader.readAsDataURL(file);
}
}
});
// Show bs Modal
$modal.on('shown.bs.modal', function() {
cropper = new Cropper(image, {
// aspectRatio: 5,
viewMode: 3,
preview: '.preview'
});
}).on('hidden.bs.modal', function() {
cropper.destroy();
cropper = null;
});
// CSRF Token
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
// Crop Image
$("#crop").click(function() {
canvas = cropper.getCroppedCanvas({
width: 100,
height: 100,
});
canvas.toBlob(function(blob) {
url = URL.createObjectURL(blob);
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
var base64data = reader.result;
$.ajax({
type : "POST",
dataType : 'json',
url : "/crop-image-show",
data : {'_token': $('meta[name = "_token"]').attr('content'), 'image':base64data},
success: function(data){
$("input[name='image_base64']").val(base64data);
$(".show-image").show();
$(".show-image").attr("src",base64data);
$("#modal").modal("hide");
}
});
}
});
})
</script>
@endsection