Untitled

// 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