How to Crop Image Before Upload using Cropper JS in Laravel

Share Me
  • 1
Laravel Crop Image Before Upload using Cropper JS

Today now in this tutorial, I will show you how to use image cropper in laravel application. Here we will know a way of simply and easy to use crop image by using cropper.js in laravel application.

We know that Cropper.js is a very easy and also it is most useful JavaScript/jQuery plugin. For image cropping also with it is support of live previews image and also it custom aspect ratio. Now in this plugin provide us to use a features of move,zoom,rotate, It is Fully responsive and mobile-friendly.

So now is this plugin will displays a resizable grid layer on a given image and also it is allowing to visually resize and it also crop the image.

So now I will use model view in example. And a model display to upload image and also crop image with preview. Just need to follow bellow step example.

Step 1: Create Route

So in this First step, i will create to route in web.php file.


Step 2: Create Controller

Now in this step,i will create to ImageCropperController.php in controller.



namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ImageCropperController extends Controller

    public function index()
        return view('cropper');

    public function upload(Request $request)
        $folderPath = public_path('upload/');

        $image_parts = explode(";base64,", $request->image);
        $image_type_aux = explode("image/", $image_parts[0]);
        $image_type = $image_type_aux[1];
        $image_base64 = base64_decode($image_parts[1]);
        $file = $folderPath . uniqid() . '.png';

        file_put_contents($file, $image_base64);

        return response()->json(['success'=>'success']);
Step 4: View File

So now in step,i will create to cropper.blade.php file in views folder.


<!DOCTYPE html>
    <title>Laravel Crop Image Before Upload using Cropper JS</title>
    <meta name="_token" content="{{ csrf_token() }}">
    <script src="" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="" crossorigin="anonymous" />
    <script src="" integrity="sha256-WqU1JavFxSAMcLP2WIOI+GB2zWmShMI82mTpLDcqFUg=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="" integrity="sha256-jKV9n9bkk/CTP8zbtEtnKaKf+ehRovOYeKoyfthwbC8=" crossorigin="anonymous" />
    <script src="" integrity="sha256-CgvH7sz3tHhkiVKh05kSUgG97YtzYNnWt6OXcmYzqHY=" crossorigin="anonymous"></script>
<style type="text/css">
img {
  display: block;
  max-width: 100%;
.preview {
  overflow: hidden;
  width: 160px; 
  height: 160px;
  margin: 10px;
  border: 1px solid red;
  max-width: 1000px !important;
<div class="container">
    <h1>Laravel Crop Image Before Upload using Cropper JS -</h1>
    <input type="file" name="image" class="image">

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalLabel">Laravel Crop Image Before Upload using Cropper JS -</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
      <div class="modal-body">
        <div class="img-container">
            <div class="row">
                <div class="col-md-8">
                    <img id="image" src="">
                <div class="col-md-4">
                    <div class="preview"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="crop">Crop</button>


var $modal = $('#modal');
var image = document.getElementById('image');
var cropper;
$("body").on("change", ".image", function(e){
    var files =;
    var done = function (url) {
      image.src = url;
    var reader;
    var file;
    var url;

    if (files && files.length > 0) {
      file = files[0];

      if (URL) {
      } else if (FileReader) {
        reader = new FileReader();
        reader.onload = function (e) {

$modal.on('', function () {
    cropper = new Cropper(image, {
	  aspectRatio: 1,
	  viewMode: 3,
	  preview: '.preview'
}).on('', function () {
   cropper = null;

    canvas = cropper.getCroppedCanvas({
	    width: 160,
	    height: 160,

    canvas.toBlob(function(blob) {
        url = URL.createObjectURL(blob);
        var reader = new FileReader();
         reader.onloadend = function() {
            var base64data = reader.result;	

                type: "POST",
                dataType: "json",
                url: "image-cropper/upload",
                data: {'_token': $('meta[name="_token"]').attr('content'), 'image': base64data},
                success: function(data){
                    alert("success upload image");

Step 5: Create Folder

So now in this step,we will create to folder in location of public/upload. Now In this folder enter to crop image.

Read Also : Laravel 8 Eloquent Global Scope Tutorial Example

I hope it will help you. Also you can follow us on Facebook

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →