Croping multible images with laravel 5

Of course first of all we need to add some routes in which we call a page with a get request and store the data with a post request. it’ll look somethign like this:

Route::get('/uploads', 'UploadController@index');
Route::post('/uploads', 'UploadController@store');

After this we need that Controller, I called it UploadController, as you know there are 2 ways how to add a new controller and I chose the Terminal one, by pressing the command

php artisan make:Controller UploadController

Or as I like to do it 

php artisan make:model Upload -r

Which makes a model and a resourceful controller for the model. 

with a first method you allso need to add a model but also pressing the command

php artisan make:model Upload

in the controller for the index methode as we saw on the get request route we just need to write it like this

public function index(){
   return view('uploads');
}

so we get the desired view. 

let’s just continue with the view for the upload images. first you need to get a +2 Jquery version and add it tot the head of your project, something like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

and also add the cropit js which you can find here move to, Cropit > dist > jquery.cropit.js then just call it like this:

<script src="js/cropit.js"></script>

the css

      .cropit-preview {
        background-color: #f8f8f8;
        background-size: cover;
        border: 1px solid #ccc;
        border-radius: 3px;
        margin-top: 7px;
        width: 250px;
        height: 250px;
      }

      .cropit-preview-image-container {
        cursor: move;
      }

      .image-size-label {
        margin-top: 10px;
      }

      input {
        display: block;
      }

      button[type="submit"] {
        margin-top: 10px;
      }

      #result {
        margin-top: 10px;
        width: 900px;
      }

      #result-data {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-wrap: break-word;
      }
    

the html

 <form action="uploads" method="post" enctype="multipart/form-data">
      {{ csrf_field() }}
      
        <div class="image-editor">
          <input type="file" class="cropit-image-input">
          <div class="cropit-preview"></div>
          <div class="image-size-label">Resize image</div>
          <input type="range" class="cropit-image-zoom-input">
          <input type="hidden" name="data" class="hidden-image-data" />
        </div>

        <div class="image-editor2">
          <input type="file" class="cropit-image-input">
          <div class="cropit-preview"></div>
          <div class="image-size-label">Resize image</div>
          <input type="range" class="cropit-image-zoom-input">
          <input type="hidden" name="data2" class="hidden-image-data2" />
        </div>
        <button type="submit" id="sub">Submit</button>
</form>

of course you can modify the html as you wish as long as you add all the right componens with ti. also don’t forget the javascript wich is an important part of all this

    <script>

      $(function() {
        $('.image-editor').cropit();
        $('.image-editor2').cropit();

        $('form').submit(function() {
          // Move cropped image data to hidden input
          let imageData = $('.image-editor').cropit('export');
          let imageData2 = $('.image-editor2').cropit('export');
          $('.hidden-image-data').val(imageData);
          $('.hidden-image-data2').val(imageData2);

          // Print HTTP request params
          let formValue = $(this).serialize();
          $('#result-data').text(formValue);

          // Prevent the form from actually submitting
          return true;
        });
      });
    </script>

here is the refactored version of this if you don’t like to write too much code.

//crop functionality
$(function() {
for(let i = 1; i <= 12; i++) {
$('.image-editor' + i).cropit();
}
// $('.image-editor' + photoTypeId).cropit();
$('form').submit(function() {
// Move cropped image data to hidden input
for(let p = 1; p <= 12; p++) {
let imageData = $('.image-editor' + p).cropit('export');
$('.hidden-image-data' + p).val(imageData);
}
// Print HTTP request params
letformValue = $(this).serialize();
$('#result-data').text(formValue);
// Prevent the form from actually submitting
return true;
});
});

after you’ve added everything as you want, you can open the page wich should look like this

Lets continue with the second part of the adventure, the store medoth on the controller

public function store(Request $request)
    {
       $imageData = $request->file('data');
       $imageData2 = $request->get('data2');

       $info = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $imageData));
       $info2 = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $imageData2));

       Image::make($info)->save(public_path('/images/1.png'));
       Image::make($info2)->save(public_path('/images/2.png'));

       return redirect()->back();
    }

You’re still not done, you need to add a package in order to make this work, thankfully you can do this with laravel and a simple command.

as you can see we used a phasade called Image we’ve dont this by importing intervention.io folow the instructions there and add it to your project font forget the add it to the beggining of the project like so:

use Intervention\Image\ImageManagerStatic as Image;

after you’ve added this and the data is right you now can crop and store the croped images on the server.

have fun.