Upload e redimensionamento de imagem

Este post mostra um pequeno exemplo de como redimensionar imagem em uma aplicação Laravel.

Geralmente quando você trabalha com grande projetos ou quer economizar espaço, as vezes precisamos gerar thumbnail de uma imagem. Com Laravel você pode usar o pacote

intervention/image .

Você também pode gerenciar o redimensionamento da imagem mantendo as dimensões .

Instalação

No primeiro passo, vamos instalar o intervention/image para redimensionar a imagem.

composer require intervention/image

Agora precisamos adicionar o pacote em config/app.php

return [
      ......
      $provides => [
             ......
             ......,
             'Intervention\Image\ImageServiceProvider'
      ],
      $aliases => [
              .....
              .....,
              'Image' => 'Intervention\Image\Facades\Image'
      ]
]

Criar rotas e controller

Primeiro adicione a rota abaixo em seu arquivo

routes.php .app/Http/routes.php

ou

route/web.php

(>5.4)

Route::get('resizeimage', 'ImageController@resizeImage');
Route::post('resizeimagepost',['as'=>'resizeImagePost','uses'=>'ImageController@resizeImagePost']);

Agora criamos o controller ImageController para upload e redimensionamento da imagem.

php artisan make:controller ImageController

O comando vai gerar o arquivo

ImageController.php

no diretório

app/Http/Controllers

.

Abaixo código de upload da imagem.

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests;
use Illuminate\Support\Facades\File;
use Illuminate\Support\Facades\Storage;
use Image;


class ImageController extends Controller
{

	/**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function resizeImage()
    {
        if (!File::isDirectory(storage_path('app/teste/thumbnail'))) {
            Storage::makeDirectory('teste/thumbnail');
        }
        if (!File::isDirectory(storage_path('app/teste/original'))) {
            Storage::makeDirectory('teste/original');
        }
      
        $files = File::allFiles(storage_path('app/teste/thumbnail'));
        $arrFile=[];
        foreach ($files as $key=> $file) {
            $arrFile[$key]["name"] = $file->getFilename();
            $arrFile[$key]["size"] = $this->formatSizeUnits($file->getSize());
        }
        $filesOrig = File::allFiles(storage_path('app/teste/original'));
        foreach ($filesOrig as $k2=> $orig) {
            $arrFile[$k2]["original"] = $this->formatSizeUnits($orig->getSize());
        }
        return view('resizeImage')
            ->with("arrImg",$arrFile);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function resizeImagePost(Request $request)
    {
	      $this->validate($request, [
            'title' => 'required',
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:15048',
        ]);

        $image = $request->file('image');
        $titulo  = $request->get('title');
        $input['imagename'] = $titulo . '.' . $image->getClientOriginalExtension();


        $destinationPath = storage_path('app/teste/thumbnail');
        $img = Image::make($image->getRealPath());
	/*
	* Redimenciona a imagem e salva o arquivo em .storage/app/teste/thumbnail
	**/
        $img->resize(4096, 4096, function ($constraint) {
            $constraint->aspectRatio();
        })->save($destinationPath . '/' . $input['imagename']);

        $destinationPath = storage_path('app/teste/original');
	//salva o arquivo original para comparar 
        $image->move($destinationPath, $input['imagename']);


        return back()
            ->with('success', 'Image Upload successful')
            ->with('imageName', $input['imagename']);
    }


    /**
     * Tamanho da imagem
     *
     * @param $bytes
     * @return string
     */
    protected function formatSizeUnits($bytes)
    {
        if ($bytes >= 1073741824) {
            $bytes = number_format($bytes / 1073741824, 2) . ' GB';
        } elseif ($bytes >= 1048576) {
            $bytes = number_format($bytes / 1048576, 2) . ' MB';
        } elseif ($bytes >= 1024) {
            $bytes = number_format($bytes / 1024, 2) . ' KB';
        } elseif ($bytes > 1) {
            $bytes = $bytes . ' bytes';
        } elseif ($bytes == 1) {
            $bytes = $bytes . ' byte';
        } else {
            $bytes = '0 bytes';
        }

        return $bytes;
    }
}

https://gist.github.com/erickosma/ce934782b48ed5948998a72d80885137#file-imagecontroller-php

Html blade template

Ultimo passo, vamos criar o arquivo resizeImage.blade.php no diretório resources/views/resizeImage.blade.php para fazer o upload da imagem.

@extends('layouts.app')

@section('content')
    <div class="container">
        <h1>Resize image</h1>
        @if (count($errors) > 0)
            <div class="alert alert-danger">
                <strong>Whoops!</strong> There were some problems with your input.<br><br>
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if ($message = Session::get('success'))
            <div class="alert alert-success alert-block">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <strong>{{ $message }}</strong>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <strong>Original Image:</strong>
                    <br/>
                    <img src="/images/{{ Session::get('imageName') }}" />
                </div>
                <div class="col-md-4">
                    <strong>Thumbnail Image:</strong>
                    <br/>
                    <img src="/thumbnail/{{ Session::get('imageName') }}" />
                </div>
            </div>
        @endif

        <form action="{!! route('resizeimage') !!}" enctype="multipart/form-data" method="post">
        <div class="row">
            <div class="col-md-4">
                <br/>
                <input type="text" name="title" class="form-control" placeholder="Add Title">
            </div>
            <div class="col-md-12">
                <br/>
                <input type="file" class="image" name="image">
            </div>
            <div class="col-md-12">
                <br/>
                <button type="submit" class="btn btn-success">Upload Image</button>
            </div>
        </div>
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
        </form>
        <div class="row">
            <div class="col-md-6">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>Nome</th>
                        <th>Tamanho</th>
                        <th>Original</th>
                    </tr>
                    </thead>
                    <tbody>
                    @if(!empty($arrImg))
                    @foreach($arrImg as $img)
                    <tr>
                        <td>{!! $img["name"] !!}</td>
                        <td>{!! $img["size"] !!}</td>
                        <td>{!! $img["original"] !!}</td>
                    </tr>
                    @endforeach
                    @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

https://gist.github.com/erickosma/55bfa4e68e8816167fd3f01fd3b36624#file-resizeimage-blade-php

Referências:

http://image.intervention.io/