Untitled
unknown
plain_text
a year ago
7.9 kB
1
Indexable
Never
// 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