Laravel – Crop and upload an image with jQuery Croppie

We generally need to crop and upload images in our application Or want to store the cropped image in the folder and database.

Using croppie js we can easily crop images before uploading.

So let’s start the steps to integrate crop and upload image features in our application.

1. Add Routes

Route::post('crop-image-upload ', 'CropImageController@ uploadCropImage')->name('cropImageUpload');

2. Add Blade View File

• Add following code into your blade file for image field

  @section('content')
  
  <div class="content-wrapper">
      <section class="content">
          <div class="row">
              <form class="" id="" role="form" action="{{route('cropImageUpload')}}" method="post" enctype="multipart/form-data" >
                  {{ csrf_field() }}
                  <div class="col-sm-12">
                      <div class="box box-primary">
                          <div class="box-body">
                            <div class="form-group">
                                <label for="" class="control-label post_data_label" >Upload Image</label><span class="colorRed"> *</span> <span class="pull-right"><i>(Resolution : 480px * 270px)</i></span><br>
                                <div class="vc_column-inner ">
                                    <label class="cabinet center-block">
                                        <figure>
                                            <img src="{{ URL::asset('/resources/assets/img/default.png')}}" class="gambar" id="item-img-output"  name="avatar"/>
                                        </figure>
                                        <p></p>
                                        <input type="hidden" name="main_image" value="" id="main_image" style="">
                                        <input type="file" accept="image/png, image/jpeg, image/jpg" class="item-img file center-block" name="file_photo"/>
                                    </label>
  
                                    <div class="modal fade" id="cropImagePop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                        <div class="modal-dialog  ">
                                            <div class="modal-content">
                                                <div class="modal-body">
                                                    <div id="upload-demo" class="center-block"></div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default close_crop" id="cancelCropBtn" data-dismiss="modal">Close</button>
                                                    <button type="button" class="btn btn-default" id="Flip">Flip</button>
                                                    {{-- <button class="btn btn-default" id="rotate" data-deg="-90">Rotate</button> --}}
                                                    <button type="button" id="cropImageBtn" class="btn btn-primary">Crop</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- <label for="" class="control-label post_data_label" >Upload Image</label><span class="colorRed"> *</span><br>
                                <div class="" style="text-align:center">
                                    <img class="old_profile_imageSub" src="{{ URL::asset('/resources/assets/custom/default.png')}}" height="300" width="350"/>
                                </div>
                                <input required class="profile_image_showInput" type="file" id="main_image" name="main_image" accept="image/*" onchange="readURL(this);" aria-required="true" aria-label="Close" />
                                <span class="changeImage profilechangeImage"><i class="fa fa-edit"></i> Click Here To Upload Image</span> --}}
                            </div>
                          </div>
                      </div>
                  </div>
                  <div class="col-sm-12">
                      <div class="box" style="border-top:0">
                          <div class="box-footer">
                              <button style="margin-left: 20px;" type="button" id="cancelBtn" class="btn btn-default pull-right">Cancel</button>
                              <button type="submit" id="createBtn" class="btn btn-success pull-right" style="margin-left: 20px;">Create</button>
                          </div>
                      </div>
                  </div>
              </form>
              <!-- /.col -->
          </div>
      </section>
  </div>
  
  @endsection
  @section('css')
  <link rel="stylesheet" href="{{ URL::asset('/resources/assets/custom/image_cropping/prism.css')}}">
  <link rel="stylesheet" href="{{ URL::asset('/resources/assets/custom/image_cropping/sweetalert.css')}}">
  <link rel="stylesheet" href="{{ URL::asset('/resources/assets/custom/image_cropping/croppie.css')}}">
  <style>
      .profile_image_showInput {
          opacity: 1;
          cursor: pointer;
          display: block;
          margin-top: 15px;
          height: 30px;
          width: 100% !important;
          background-color: #269abc;
      }
      .changeImage {
          background: #269abc none repeat scroll 0 0;
          border-radius: 0px;
          pointer-events: none;
          display: block;
          padding: 5px 15px;
          bottom: 0;
          color: #fff;
          margin-top: -30px !important;
          margin: 0 auto;
          width: 100%;
          float: left;
          left: 0;
          position: relative;
          text-align: center;
      }
      body, html, #beacon_canvas, #map_canvas,#map_canvas2,#map_canvas1{
          /* position:absolute; */
          height: 250px;
          margin: 0;
      }
      #beacon_canvas .centerMarker, #map_canvas .centerMarker,#map_canvas2 .centerMarker2,#map_canvas1 .centerMarker1{
          position:absolute;
          /*url of the marker*/
          background:url('https://maps.gstatic.com/mapfiles/markers2/marker.png') no-repeat;
          /*center the marker*/
          top:50%;
          left:50%;
          z-index:1;
          /*fix offset when needed*/
          margin-left:-10px;
          margin-top:-34px;
          /*size of the image*/
          height:34px;
          width:20px;
          cursor:pointer;
      }
      #upload-demo{
          height: 500px;
      }
      .cabinet figure{
          text-align: center;
      }
      .old_profile_imageSub, #item-img-output{
          /* height: 100%; */
          max-width: 100%;
      }
      .control-label{
        display: inline-block;
      }
  </style>
  @endsection
  @section('script')
  
  <script src="{{URL::asset('resources/assets/custom/jQuery-validation-plugin/jquery.validate.js')}}"></script>
  <script src="{{URL::asset('resources/assets/custom/jQuery-validation-plugin/additional-methods.js')}}"></script>
  <script src="{{URL::asset('/resources/assets/custom/image_cropping/prism.js')}}"></script>
  <script src="{{URL::asset('/resources/assets/custom/image_cropping/sweetalert.js')}}"></script>
  <script src="{{URL::asset('/resources/assets/custom/image_cropping/croppie.js')}}"></script>
  <script src="{{URL::asset('/resources/assets/custom/image_cropping/main.js')}}"></script>
  <script src="{{URL::asset('/resources/assets/custom/image_cropping/exif.js')}}"></script>
  
  @endsection
  

• Note that you need to include the css and javascript of Croppie into your blade file.

• Then, include the following script code into your blade file

  <script type="text/javascript">
      // Start upload preview image
      var FLIP = 2;
      var NORMAL = 1;
      var orientation = NORMAL;
      var $uploadCrop1, tempFilename, rawImg, imageId;
      var fileTypes = ['jpg', 'jpeg', 'png'];
          function readFile(input) {
              if (input.files && input.files[0]) {
                      var reader = new FileReader();
                      var file = input.files[0]; // Get your file here
                      var fileExt = file.type.split('/')[1]; // Get the file extension
                      if (fileTypes.indexOf(fileExt) !== -1) {
                          reader.onload = function (e) {
                              $('.upload-demo').addClass('ready');
                              $('#cropImagePop').modal('show');
                              rawImg = e.target.result;
                          }
                          reader.readAsDataURL(input.files[0]);
  
                      }else{
                          swal("Only JPEG, PNG, JPG file types are supported");
                          $(".item-img").val("");
                      }
                  }
                  else {
                  swal("Please select an image");
                  $("#main_image").val("");
                  $("#item-img-output").attr("src",SITE_URL + "/resources/assets/custom/default.png");
  
              }
          }
          $uploadCrop1 = $('#upload-demo').croppie({
              viewport: {
              width: 480,
              height: 270,
              },
              enableOrientation: true,
              enforceBoundary: true,
              enableExif: true
          });
          $('#cropImagePop').on('shown.bs.modal', function(){
              $uploadCrop1.croppie('bind', {
                  url: rawImg
                  }).then(function(){
                      $("span#main_image-error").hide();
                  });
          });
          $('#Flip').click(function() {
              orientation = orientation == NORMAL ? FLIP : NORMAL;
              $uploadCrop1.croppie('bind', {
                  url: rawImg,
                  orientation: orientation,
              });
          });
          $('#rotate').click(function() {
              $uploadCrop1.croppie('rotate', parseInt($(this).data('deg')));
          });
          $('.item-img').on('change', function () { imageId = $(this).data('id'); tempFilename = $(this).val();
          $('#cancelCropBtn').data('id', imageId); readFile(this); });
          $("#cancelCropBtn").click(function(){
             $(".item-img").val("");
             $("#main_image").val("");
             $("#item-img-output").attr("src",SITE_URL + "/resources/assets/custom/default.png");
          });
          $('#cropImageBtn').on('click', function (ev) {
              $uploadCrop1.croppie('result', {
              type: 'base64',
              format: 'jpeg',
              size: {width: 480, height: 270}
              }).then(function (resp) {
                  $('#item-img-output').attr('src', resp);
                  $('#main_image').attr('value', resp);
                  $('#cropImagePop').modal('hide');
              });
          });
      // End upload preview image
  </script>
  

3. Create Controller File

• Add this code in your controller for upload file

  <?php
  
  namespace App\Http\Controllers\Admin;
  
  use App\Http\Controllers\Controller;
  use App\User;
  use Illuminate\Http\Request;
  use Illuminate\Support\Facades\Input;
  use Image;
  use File;
  use DB;
  use URL;
  use Yajra\DataTables\Facades\DataTables;
  use App\Helper\GlobalHelper;
  use Auth;
  use Intervention\Image\ImageManagerStatic as ImageResize;
  
  class CropImageController extends Controller
  {
      public function uploadCropImage(Request $request)
      {
          if(!empty($request->main_image) || $request->main_image != ''){
              $data = explode(';', $request->main_image);
              $part = explode("/", $data[0]);
              $image = $request->main_image;  // your base64 encoded
              $image = str_replace('data:image/'.$part[1].';base64,', '', $image);
              $image = str_replace(' ', '+', $image);
              $fileName = md5(microtime().str_random(10)) .'.'.$part[1];
              $destinationPath = base_path().'/resources/uploads/';
              \File::put(base_path().'/resources/uploads/' .$fileName, base64_decode($image));
              chmod($destinationPath.$fileName,0777);
              $image = url('/').'/resources/uploads/'.$fileName;
          }
           return response()->json(['status'=>true]);
      }
  }
  

• After followed successfully you must have to create “upload” folder with full permissions

4. Now You can see image cropping