{"id":27822,"date":"2021-05-25T13:42:00","date_gmt":"2021-05-25T10:42:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27822"},"modified":"2021-10-18T04:09:24","modified_gmt":"2021-10-18T01:09:24","slug":"como-fazer-upload-e-recortar-imagens-no-laravel-usando-imgareaselect-e-a-biblioteca-de-imagens-de-intervencao","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-fazer-upload-e-recortar-imagens-no-laravel-usando-imgareaselect-e-a-biblioteca-de-imagens-de-intervencao\/","title":{"rendered":"Como fazer upload e recortar imagens no Laravel usando imgAreaSelect e a biblioteca de imagens de interven\u00e7\u00e3o"},"content":{"rendered":"

Recentemente, um de nossos leitores pediu para escrever um artigo sobre upload e recorte de imagens no Laravel. No passado, publiquei o artigo sobre o mesmo t\u00f3pico para PHP Upload, Crop and Resize Image in PHP<\/a>. Mas quando se trata do Laravel, precisamos fazer modifica\u00e7\u00f5es de acordo com os padr\u00f5es do Laravel. Neste artigo, estudamos como fazer upload e recortar imagens no Laravel.<\/p>\n

Para este tutorial, vou usar 2 bibliotecas – imgAreaSelect e Intervention Image.<\/p>\n

imgAreaSelect<\/a> \u00e9 um plugin jQuery que permite cortar imagens selecionando uma \u00e1rea retangular de uma imagem. \u00c9 um plugin leve e f\u00e1cil de usar.<\/p>\n

Por outro lado, Intervention Image<\/a> \u00e9 uma biblioteca de tratamento e manipula\u00e7\u00e3o de imagens. Esta biblioteca nos ajuda a criar, editar e compor imagens no lado do servidor.<\/p>\n

Neste tutorial, usarei imgAreaSelect para obter as coordenadas da imagem cortada e a biblioteca de imagens de interven\u00e7\u00e3o para realmente cortar a imagem no lado do servidor de acordo com as coordenadas.<\/p>\n

Come\u00e7ando<\/h3>\n

Para come\u00e7ar, voc\u00ea deve ter instalado o Laravel. Se voc\u00ea ainda n\u00e3o o criou, instale-o por meio do comando:<\/p>\n

composer create-project --prefer-dist laravel\/laravel laravel-dev<\/code><\/pre>\n
O comando acima ir\u00e1 configurar o projeto Laravel chamado ‘laravel-dev’ para voc\u00ea.<\/p>\n
A seguir, instale a biblioteca de imagens Intervention em seu projeto Laravel. Execute o comando abaixo a partir do diret\u00f3rio raiz do projeto.<\/p>\n
composer require intervention\/image<\/code><\/pre>\n
Depois de instalar a biblioteca, abra o config\/app.php<\/code>arquivo e adicione as seguintes linhas a ele.<\/p>\n
Adicione os provedores de servi\u00e7o para este pacote na $providers<\/code>matriz.<\/p>\n
InterventionImageImageServiceProvider::class<\/code><\/pre>\n
Adicione a fachada ao $aliases<\/code>array.<\/p>\n
'Image' => InterventionImageFacadesImage::class<\/code><\/pre>\n
Finalmente, baixe o plugin imgAreaSelect<\/a>. Do zip baixado, copie as imagens, CSS, arquivo JS e cole na pasta p\u00fablica do projeto Laravel. Basicamente, sua estrutura deve ser como a imagem abaixo.<\/p>\n
\"Como<\/a><\/p>\n
Como usar imgAreaSelect<\/h3>\n
Como vamos usar CSS e JS do plugin imgAreaSelect, vamos construir uma estrutura para ele. Crie um resources\/views\/layouts\/app.blade.php<\/code>arquivo e adicione o c\u00f3digo abaixo nele.<\/p>\n
<!DOCTYPE html>\n<html lang=\"{{ app()->getLocale() }}\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"utf-8\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0<!-- CSRF Token -->\n\u00a0\u00a0\u00a0\u00a0<meta name=\"csrf-token\" content=\"{{ csrf_token() }}\">\n\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0<title>{{ config('app.name', 'Laravel') }}<\/title>\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0@yield('style')\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<div id=\"app\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@yield('content')\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0@yield('footer')\n<\/body>\n<\/html><\/code><\/pre>\n
Este arquivo atua como um arquivo comum para todos os blades. Usando os marcadores de posi\u00e7\u00e3o (@yield<\/code>), pode-se colocar o c\u00f3digo no arquivo blade nos respectivos locais, como no cabe\u00e7alho, rodap\u00e9, etc.<\/p>\n
Crie um image.blade.php<\/code>arquivo dentro do resources\/views<\/code>diret\u00f3rio. Este arquivo blade ter\u00e1 o seguinte c\u00f3digo.<\/p>\n
image.blade.php<\/strong><\/p>\n
@extends('layouts.app')\n\u00a0\u00a0\n@section('style')\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"{{ asset('css\/imgareaselect.css') }}\" \/>\n@endsection\n\u00a0\u00a0\n@section('content')\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0@if(session('success'))\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"alert alert-success\">{{session('success')}}<\/div>\n\u00a0\u00a0\u00a0\u00a0@endif\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0<div class=\"container mt-5\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<form action=\"{{ url('image') }}\" method=\"post\" enctype=\"multipart\/form-data\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"exampleInputImage\">Image:<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" name=\"profile_image\" id=\"exampleInputImage\" class=\"image\" required>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"x1\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"y1\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"w\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"h\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{{ csrf_field() }}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button type=\"submit\" class=\"btn btn-primary\">Submit<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/form>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"row mt-5\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p><img id=\"previewimage\" style=\"display:none;\"\/><\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@if(session('path'))\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img src=\"{{ session('path') }}\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@endif\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n@endsection\n\u00a0\n@section('footer')\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"{{ asset('js\/jquery.imgareaselect.min.js') }}\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script>\n\u00a0\u00a0\u00a0\u00a0jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var p = $(\"#previewimage\");\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(\"body\").on(\"change\", \".image\", function(){\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var imageReader = new FileReader();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0imageReader.readAsDataURL(document.querySelector(\".image\").files[0]);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0imageReader.onload = function (oFREvent) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0p.attr('src', oFREvent.target.result).fadeIn();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#previewimage').imgAreaSelect({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onSelectEnd: function (img, selection) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"x1\"]').val(selection.x1);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"y1\"]').val(selection.y1);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"w\"]').val(selection.width);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"h\"]').val(selection.height);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0<\/script>\n@endsection<\/code><\/pre>\n
Voc\u00ea deve ter notado algumas coisas a partir do arquivo acima como @extends('layouts.app')<\/code>, @section('style')<\/code>, @section('content')<\/code>, etc. Estas se\u00e7\u00f5es v\u00e3o nos respectivos locais de app.blade.php<\/code>. O usu\u00e1rio pode ter uma ideia melhor disso ao visualizar o c\u00f3digo-fonte desta p\u00e1gina no navegador.<\/p>\n
Para chamar essa visualiza\u00e7\u00e3o, crie um controlador usando o comando:<\/p>\n
php artisan make:controller ImageController --resource<\/code><\/pre>\n
Adicione a refer\u00eancia deste controlador no arquivo de rota.<\/p>\n
rotas \/ web.php<\/strong><\/p>\n
Route::resource('image', 'ImageController');<\/code><\/pre>\n
Abra o ‘ImageController’ no editor e para o m\u00e9todo ‘index’ chame o arquivo de visualiza\u00e7\u00e3o.<\/p>\n
<?php\n\u00a0\nnamespace AppHttpControllers;\n\u00a0\nuse IlluminateHttpRequest;\nuse Image;\n\u00a0\nclass ImageController extends Controller\n{\n\u00a0\u00a0\u00a0\u00a0\/**\n\u00a0\u00a0\u00a0\u00a0\u00a0* Display a listing of the resource.\n\u00a0\u00a0\u00a0\u00a0\u00a0*\n\u00a0\u00a0\u00a0\u00a0\u00a0* @return IlluminateHttpResponse\n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\u00a0\u00a0\u00a0\u00a0public function index()\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return view('image');\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0.....\n}<\/code><\/pre>\n
Execute o php artisan serve<\/code>comando e voc\u00ea poder\u00e1 ver seu formul\u00e1rio no URL abaixo.<\/p>\n
http:\/\/localhost:8000\/image<\/code><\/pre>\n
Ao carregar a imagem, voc\u00ea dever\u00e1 ver a imagem de visualiza\u00e7\u00e3o abaixo do formul\u00e1rio. Nessa visualiza\u00e7\u00e3o, voc\u00ea pode selecionar uma parte da imagem que deseja cortar.<\/p>\n
\"Como<\/a><\/p>\n
Carregar e cortar imagem usando a biblioteca de imagens de interven\u00e7\u00e3o<\/h3>\n
Neste ponto, conclu\u00edmos com o c\u00f3digo do lado do cliente, onde o usu\u00e1rio pode escolher uma parte da imagem que deseja cortar. O pr\u00f3ximo trabalho \u00e9 cortar a imagem e armazen\u00e1-la no servidor. Para armazenar uma imagem em um servidor, usarei o recurso de armazenamento do Laravel, onde criamos um link simb\u00f3lico de uma pasta de ‘armazenamento’. Para criar um link simb\u00f3lico, execute o comando:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Este comando cria um diret\u00f3rio de ‘armazenamento’ na pasta ‘p\u00fablica’.<\/p>\n
Em nosso controlador, j\u00e1 inclu\u00edmos uma fachada, use Image;<\/code>ent\u00e3o voc\u00ea est\u00e1 pronto para usar a biblioteca de imagens de interven\u00e7\u00e3o para cortar a imagem no lado do servidor. O store()<\/code>m\u00e9todo do controlador deve ter o c\u00f3digo abaixo:<\/p>\n
\/**\n\u00a0* Store a newly created resource in storage.\n\u00a0*\n\u00a0* @param\u00a0 IlluminateHttpRequest\u00a0 $request\n\u00a0* @return IlluminateHttpResponse\n\u00a0*\/\npublic function store(Request $request)\n{\n\u00a0\u00a0\u00a0\u00a0if($request->hasFile('profile_image')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename with extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenamewithextension = $request->file('profile_image')->getClientOriginalName();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename without extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get file extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$extension = $request->file('profile_image')->getClientOriginalExtension();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/filename to store\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenametostore = $filename.'_'.time().'.'.$extension;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Upload File\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('profile_image')->storeAs('public\/profile_images', $filenametostore);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(!file_exists(public_path('storage\/profile_images\/crop'))) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mkdir(public_path('storage\/profile_images\/crop'), 0755);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ crop image\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img = Image::make(public_path('storage\/profile_images\/'.$filenametostore));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$croppath = public_path('storage\/profile_images\/crop\/'.$filenametostore);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img->crop($request->input('w'), $request->input('h'), $request->input('x1'), $request->input('y1'));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img->save($croppath);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ you can save crop image path below in database\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$path = asset('storage\/profile_images\/crop\/'.$filenametostore);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return redirect('image')->with(['success' => \"Image cropped successfully.\", 'path' => $path]);\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
Neste c\u00f3digo, estamos armazenando uma vers\u00e3o recortada de uma imagem no diret\u00f3rio ‘public \/ storage \/ profile_images \/ crop’. Depois de armazen\u00e1-lo, estamos passando um caminho da imagem recortada de volta \u00e0 vista. E no arquivo de visualiza\u00e7\u00e3o, j\u00e1 adicionamos um c\u00f3digo que exibe a imagem cortada para o usu\u00e1rio final.<\/p>\n
Definir a largura m\u00e1xima da imagem<\/h3>\n
\u00c0s vezes, os usu\u00e1rios podem querer definir a largura m\u00e1xima para a vers\u00e3o de recorte de uma imagem. O plugin imgAreaSelect fornece v\u00e1rias op\u00e7\u00f5es como aspectRatio, maxWidth, maxHeight, etc. para personalizar o resultado final de uma imagem. Um usu\u00e1rio pode usar a op\u00e7\u00e3o maxWidth alterando o c\u00f3digo JavaScript da seguinte maneira:<\/p>\n
$('#previewimage').imgAreaSelect({\n\u00a0\u00a0\u00a0\u00a0maxWidth: '1000', \/\/ this value is in pixels\n\u00a0\u00a0\u00a0\u00a0onSelectEnd: function (img, selection) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"x1\"]').val(selection.x1);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"y1\"]').val(selection.y1);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"w\"]').val(selection.width);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"h\"]').val(selection.height);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \n\u00a0\u00a0\u00a0\u00a0}\n});<\/code><\/pre>\n
\u00c9 tudo sobre como fazer upload e cortar imagens no Laravel. Espero que voc\u00ea saiba como lidar com a tarefa de recortar imagens. Eu gostaria de ouvir seus pensamentos e sugest\u00f5es na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n
Artigos relacionados<\/h4>\n