Laravel – Crop and upload an image with jQuery Croppie

Jan. 21

3.59 K

VIEWS

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

« SwiftUI: Getting Started with First Demo

React Native: First Demo »

Author

Posted by Lets Nurture

+1 902 620 9098 info@letsnurture.com

Concept Development

Enterprise Tech

Team Hire

Programming Services

Managed Services

Integration Services

Digital Marketing Services

Laravel – Crop and upload an image with jQuery Croppie

1. Add Routes

2. Add Blade View File

3. Create Controller File

4. Now You can see image cropping

Author

CONTACT US

95 Millennium Blvd Moncton,
New Brunswick, Canada

Concept Development

Enterprise Tech

Team Hire

Programming Services

Managed Services

Integration Services

Digital Marketing Services

Laravel – Crop and upload an image with jQuery Croppie

Share

1. Add Routes

2. Add Blade View File

3. Create Controller File

4. Now You can see image cropping

Sign up our Newsletter!

Author