{"id":28010,"date":"2021-05-30T18:52:00","date_gmt":"2021-05-30T15:52:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28010"},"modified":"2021-10-18T04:05:59","modified_gmt":"2021-10-18T01:05:59","slug":"como-fazer-upload-recortar-e-redimensionar-imagens-usando-jquery-e-php","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-fazer-upload-recortar-e-redimensionar-imagens-usando-jquery-e-php\/","title":{"rendered":"Como fazer upload, recortar e redimensionar imagens usando jQuery e PHP"},"content":{"rendered":"

Se voc\u00ea estiver executando um site, conv\u00e9m recortar a imagem em determinados cen\u00e1rios. Digamos que voc\u00ea queira permitir que o usu\u00e1rio recorte suas imagens de perfil antes de fazer o upload. Neste artigo, estudamos como fazer upload, cortar e redimensionar a imagem usando imgAreaSelect e PHP.<\/p>\n

Podemos dizer que quando cortamos a imagem, na verdade a estamos redimensionando ajustando com as coordenadas fornecidas da parte cortada.<\/p>\n

imgAreaSelect<\/a> \u00e9 um plugin jQuery que fornece um recurso para cortar as imagens. \u00c9 um plugin leve e f\u00e1cil de usar.<\/p>\n

Para come\u00e7ar, voc\u00ea precisa usar o plugin imgAreaSelect e a biblioteca de imagens de interven\u00e7\u00e3o<\/a>. Usando imgAreaSelect escolhemos a \u00e1rea da imagem que precisa ser cortada e a biblioteca de imagens Internention nos ajuda a armazenar a vers\u00e3o original e copiada de uma imagem no servidor.<\/p>\n

Dito isso, vamos dar uma olhada em como fazer upload, cortar e redimensionar a imagem usando jQuery e PHP.<\/p>\n

Instala\u00e7\u00e3o<\/h3>\n

Baixe o plugin imgAreaSelect<\/a> do link fornecido. Para instala\u00e7\u00e3o do Interventon Image, recomendo usar o Composer<\/a>. Execute o comando abaixo no diret\u00f3rio raiz do projeto para instalar a biblioteca de imagens de interven\u00e7\u00e3o.<\/p>\n

composer require intervention\/image<\/code><\/pre>\n
Quando terminar, certifique-se de que sua estrutura de diret\u00f3rio se pare\u00e7a com a imagem abaixo.<\/p>\n
\"Como<\/a><\/p>\n
Como usar imgAreaSelect<\/h3>\n
Para usar imgAreaSelect, primeiro precisamos incluir seu arquivo CSS e JS junto com a biblioteca jQuery.<\/p>\n
<link rel=\"stylesheet\" href=\"css\/imgareaselect.css\">\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<script src=\"js\/jquery.imgareaselect.js\"><\/script><\/code><\/pre>\n
Em seguida, exigimos um formul\u00e1rio simples onde o usu\u00e1rio pode navegar pela imagem e envi\u00e1-la para processamento do lado do servidor.<\/p>\n
<form action=\"crop.php\" method=\"post\" enctype=\"multipart\/form-data\">\n\u00a0\u00a0\u00a0\u00a0Upload Image: <input type=\"file\" name=\"image\" id=\"image\" \/>\n\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"x1\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"y1\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"w\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"h\" value=\"\" \/><br><br>\n\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" value=\"Submit\" \/>\n<\/form>\n\u00a0\n<p><img id=\"previewimage\" style=\"display:none;\"\/><\/p><\/code><\/pre>\n
O formul\u00e1rio acima exibir\u00e1 o bot\u00e3o de entrada e envio do arquivo. Peguei campos ocultos no formul\u00e1rio que precisar\u00e3o cortar a imagem no lado do servidor. Basicamente, esses campos ocultos enviam coordenadas da imagem para recort\u00e1-la.<\/p>\n
Quando o usu\u00e1rio navegar na imagem, mostraremos a imagem onde o usu\u00e1rio pode selecionar a \u00e1rea que deseja cortar. O c\u00f3digo abaixo permite que o usu\u00e1rio visualize a imagem e escolha uma \u00e1rea da imagem a ser cortada.<\/p>\n
<script>\njQuery(function($) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0var p = $(\"#previewimage\");\n\u00a0\u00a0\u00a0\u00a0$(\"body\").on(\"change\", \"#image\", function(){\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var imageReader = new FileReader();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0imageReader.readAsDataURL(document.getElementById(\"image\").files[0]);\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0imageReader.onload = function (oFREvent) {\n\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};\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$('#previewimage').imgAreaSelect({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onSelectEnd: function (img, selection) {\n\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$('input[name=\"y1\"]').val(selection.y1);\n\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$('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}\n\u00a0\u00a0\u00a0\u00a0});\n});\n<\/script><\/code><\/pre>\n
Upload do lado do servidor, corte e redimensionamento de imagem<\/h3>\n
Ap\u00f3s o envio do formul\u00e1rio, ele redireciona para o crop.php<\/code>arquivo onde carregamos e recortamos a imagem no lado do servidor. Este arquivo aceita entrada de arquivo e coordenadas da imagem para recorte.<\/p>\n
Primeiro, vamos incluir o ambiente da biblioteca de Imagens de Interven\u00e7\u00e3o.<\/p>\n
<?php\nrequire 'vendor\/autoload.php';\n\u00a0\nuse InterventionImageImageManagerStatic as Image;<\/code><\/pre>\n
Vou usar um crop()<\/code>m\u00e9todo de biblioteca para criar a vers\u00e3o recortada da imagem original. Os par\u00e2metros da fun\u00e7\u00e3o crop() s\u00e3o largura, altura e coordenadas dos eixos xe y. Voc\u00ea pode ler mais sobre isso em sua documenta\u00e7\u00e3o<\/a>.<\/p>\n
crop.php<\/strong><\/p>\n
<?php\nrequire 'vendor\/autoload.php';\n\u00a0\nuse InterventionImageImageManagerStatic as Image;\n\u00a0\nif(isset($_POST['submit'])) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0if(isset($_FILES['image']['name']) && !empty($_FILES['image']['name'])) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(!file_exists('images')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mkdir('images', 0755);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filename = $_FILES['image']['name'];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filepath = 'images\/'. $filename;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0move_uploaded_file($_FILES['image']['tmp_name'], $filepath);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(!file_exists('images\/crop')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mkdir('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($filepath);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$croppath = 'images\/crop\/'. $filename;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img->crop($_POST['w'], $_POST['h'], $_POST['x1'], $_POST['y1']);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img->save($croppath);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo \"<img src='\". $croppath .\"' \/>\";\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
\u00c9 isso! Agora, se voc\u00ea testar o fluxo, obter\u00e1 a vers\u00e3o original e a vers\u00e3o cortada das imagens armazenadas nos diret\u00f3rios ‘imagens’ e ‘corte’, respectivamente.<\/p>\n
Definir a largura m\u00e1xima da imagem<\/h3>\n
\u00c0s vezes, o usu\u00e1rio pode querer definir a largura m\u00e1xima para uma vers\u00e3o recortada de uma imagem. 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 para definir a largura m\u00e1xima da imagem.<\/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
Espero que voc\u00ea entenda como fazer upload, cortar e redimensionar a imagem usando jQuery e PHP. Eu gostaria de saber sua opini\u00e3o na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n
Artigos relacionados<\/h4>\n