{"id":27799,"date":"2021-05-25T10:56:00","date_gmt":"2021-05-25T07:56:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27799"},"modified":"2021-10-18T04:09:33","modified_gmt":"2021-10-18T01:09:33","slug":"crie-uma-miniatura-no-laravel-usando-a-biblioteca-de-imagens-de-intervencao","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/crie-uma-miniatura-no-laravel-usando-a-biblioteca-de-imagens-de-intervencao\/","title":{"rendered":"Crie uma miniatura no Laravel usando a biblioteca de imagens de interven\u00e7\u00e3o"},"content":{"rendered":"

No site sempre tratamos das imagens. Com base no requisito, usamos diferentes vers\u00f5es de imagens. \u00c9 uma boa pr\u00e1tica que os desenvolvedores criem vers\u00f5es diferentes, tamb\u00e9m conhecidas como miniaturas da imagem \u00fanica. Essas miniaturas podem ser usadas ao exibir diferentes tamanhos de imagens, dependendo do tamanho do cont\u00eainer. Mostrar uma imagem que se ajusta ao tamanho do cont\u00eainer economiza largura de banda e melhora o tempo de carregamento da p\u00e1gina. Mostrar uma imagem de tamanho grande em um cont\u00eainer pequeno \u00e9 uma pr\u00e1tica ruim e compromete o tempo de carregamento da p\u00e1gina. Como resultado, \u00e9 recomend\u00e1vel criar v\u00e1rias miniaturas de uma imagem e usar a vers\u00e3o apropriada sempre que necess\u00e1rio.<\/p>\n

Neste artigo, estudamos como criar uma miniatura no Laravel usando a biblioteca de Imagens de Interven\u00e7\u00e3o. Intervention Image<\/a> \u00e9 gratuito e uma das bibliotecas populares para manipula\u00e7\u00e3o de imagens. Em segundo plano, esta biblioteca usa a Biblioteca GD e Imagick para manipula\u00e7\u00e3o de imagens.<\/p>\n

Para este tutorial, criarei 3 miniaturas – pequeno, m\u00e9dio e grande com tamanhos 150 93, 300 * 185, 550 340 respectivamente. Altere esses tamanhos de acordo com sua necessidade.<\/p>\n

Come\u00e7ando<\/h3>\n

Para come\u00e7ar, voc\u00ea precisa primeiro instalar a biblioteca de Imagens de Interven\u00e7\u00e3o no Laravel. Abra o terminal no diret\u00f3rio raiz do seu projeto e execute o comando abaixo:<\/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 nele.<\/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
A seguir, para armazenar as imagens, precisamos criar um diret\u00f3rio. V\u00e1 at\u00e9 o terminal e execute o comando da seguinte maneira:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Este comando cria um diret\u00f3rio de armazenamento (link simb\u00f3lico) na pasta p\u00fablica. Nesta pasta, irei carregar a imagem original e suas miniaturas.<\/p>\n
Crie uma miniatura no Laravel<\/h3>\n
Todos n\u00f3s definimos a configura\u00e7\u00e3o b\u00e1sica e agora podemos escrever o c\u00f3digo real. Vamos criar um formul\u00e1rio em seu arquivo de visualiza\u00e7\u00e3o.<\/p>\n
<form action=\"{{ url('PASS_ACTION_URL') }}\" method=\"post\" enctype=\"multipart\/form-data\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"exampleInputFile\">File input<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" name=\"profile_image\" id=\"exampleInputFile\">\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0{{ csrf_field() }}\n\u00a0\u00a0\u00a0\u00a0<button type=\"submit\" class=\"btn btn-default\">Submit<\/button>\n<\/form><\/code><\/pre>\n
No controlador, voc\u00ea precisa adicionar a fachada da biblioteca ‘Imagem’ que adicionamos no config\/app.php<\/code>arquivo.<\/p>\n
<?php\n\u00a0\u00a0\nnamespace AppHttpControllers;\n\u00a0\u00a0\nuse IlluminateHttpRequest;\nuse Image;\n\u00a0\u00a0\nclass ImageController extends Controller\n{\n\u00a0\u00a0\n}<\/code><\/pre>\n
Adicionando a fachada, podemos chamar fun\u00e7\u00f5es da biblioteca Intervention Image. No c\u00f3digo abaixo, irei fazer o upload da imagem em dois lugares. A imagem original vai diretamente para dentro da storage\/profile_images<\/code>pasta. As miniaturas seriam armazenadas no storage\/profile_images\/thumbnail<\/code>diret\u00f3rio. Primeiro carregamos a imagem original na pasta de miniaturas e depois a redimensionamos.<\/p>\n
public 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\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\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\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\/\/small thumbnail name\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$smallthumbnail = $filename.'_small_'.time().'.'.$extension;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/medium thumbnail name\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$mediumthumbnail = $filename.'_medium_'.time().'.'.$extension;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/large thumbnail name\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$largethumbnail = $filename.'_large_'.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\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('profile_image')->storeAs('public\/profile_images\/thumbnail', $smallthumbnail);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('profile_image')->storeAs('public\/profile_images\/thumbnail', $mediumthumbnail);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('profile_image')->storeAs('public\/profile_images\/thumbnail', $largethumbnail);\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/create small thumbnail\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$smallthumbnailpath = public_path('storage\/profile_images\/thumbnail\/'.$smallthumbnail);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->createThumbnail($smallthumbnailpath, 150, 93);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/create medium thumbnail\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$mediumthumbnailpath = public_path('storage\/profile_images\/thumbnail\/'.$mediumthumbnail);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->createThumbnail($mediumthumbnailpath, 300, 185);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/create large thumbnail\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$largethumbnailpath = public_path('storage\/profile_images\/thumbnail\/'.$largethumbnail);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->createThumbnail($largethumbnailpath, 550, 340);\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return redirect('image')->with('success', \"Image uploaded successfully.\");\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
No c\u00f3digo acima, guardo a imagem com 3 formatos: pequeno, m\u00e9dio e grande. Depois de armazen\u00e1-los, estamos chamando o m\u00e9todo createThumbnail<\/code>e passando a largura e altura necess\u00e1rias para o m\u00e9todo. Vamos definir essa fun\u00e7\u00e3o a seguir. Esta fun\u00e7\u00e3o deve ir para o mesmo controlador.<\/p>\n
\/**\n\u00a0* Create a thumbnail of specified size\n\u00a0*\n\u00a0* @param string $path path of thumbnail\n\u00a0* @param int $width\n\u00a0* @param int $height\n\u00a0*\/\npublic function createThumbnail($path, $width, $height)\n{\n\u00a0\u00a0\u00a0\u00a0$img = Image::make($path)->resize($width, $height, function ($constraint) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$constraint->aspectRatio();\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0$img->save($path);\n}<\/code><\/pre>\n
Aqui estamos redimensionando a imagem proporcionalmente. Fazendo isso, mantemos a propor\u00e7\u00e3o da imagem e a imagem n\u00e3o \u00e9 cortada.<\/p>\n
Se voc\u00ea est\u00e1 procurando um corte dif\u00edcil, substitua as linhas abaixo<\/p>\n
$img = Image::make($path)->resize($width, $height, function ($constraint) {\n\u00a0\u00a0\u00a0\u00a0$constraint->aspectRatio();\n});\n$img->save($path);<\/code><\/pre>\n
Com<\/p>\n
$img = Image::make($path)->resize($width, $height)->save($path);<\/code><\/pre>\n
Espero que voc\u00ea entenda como criar uma miniatura no Laravel usando a biblioteca de Imagens de Interven\u00e7\u00e3o. Eu gostaria de ouvir sua opini\u00e3o na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n
Artigos relacionados<\/h4>\n