Sempre quis um método fácil de usar para redimensionar suas imagens em PHP? Bem, é para isso que servem as classes PHP—peças de funcionalidade reutilizáveis que chamamos para fazer o trabalho sujo nos bastidores. Vamos aprender a criar nossa própria classe que será bem construída, além de expansível. O redimensionamento deve ser fácil. Quão fácil? Que tal três passos!
Introdução
Para dar a você uma visão rápida do que estamos tentando alcançar com nossa classe, a classe deve ser:
- fácil de usar
- independente de formato: pode abrir, redimensionar e salvar vários formatos de imagem diferentes
- dimensionamento inteligente: sem distorção de imagem!
Este não é um tutorial sobre como criar classes e objetos e, embora essa habilidade ajude, não é necessária para seguir este tutorial.
Há muito o que cobrir – vamos começar.
1. Preparação
O primeiro passo é fácil. Em seu diretório de trabalho crie dois arquivos: um chamado index.phpo outro resize-class.php
2. Chamando o Objeto
Para dar uma ideia do que estamos tentando alcançar, começaremos codificando as chamadas que usaremos para redimensionar as imagens. Abre o teu index.php arquivo e adicione o seguinte código.
Como você pode ver, há uma boa lógica para o que estamos fazendo. Abrimos o arquivo de imagem, definimos as dimensões para as quais queremos redimensionar a imagem e o tipo de redimensionamento. Em seguida, salvamos a imagem, escolhendo o formato de imagem que queremos e a qualidade da imagem. Salve e feche seu index.php Arquivo.
// *** Include the class
include("resize-class.php");
// *** 1) Initialize / load image
$resizeObj = new resize('sample.jpg');
// *** 2) Resize image (options: exact, height, width, auto, crop)
$resizeObj -> resizeImage(150, 100, 'crop');
// *** 3) Save image
$resizeObj -> saveImage('sample-resized.gif', 100);
No código acima você pode ver que estamos abrindo um jpg arquivo, mas salvando um gif. Lembre-se, é tudo uma questão de flexibilidade.
3. Crie o Esqueleto de Classe
É a Programação Orientada a Objetos (OOP) que torna essa sensação de facilidade possível. Pense em uma classe como um padrão; você pode encapsular os dados – outro termo de jargão que realmente significa apenas ocultar os dados. Podemos então reutilizar essa classe várias vezes sem a necessidade de reescrever qualquer código de redimensionamento – você só precisa chamar os métodos apropriados como fizemos na etapa dois. Uma vez que nosso padrão foi criado, criamos instâncias desse padrão, chamadas de objetos.
“A função de construção, conhecida como construtor, é um método de classe especial que é chamado pela classe quando você cria um novo objeto.”
Vamos começar a criar nossa classe de redimensionamento. Abre o teu resize-class.php Arquivo. Abaixo está uma estrutura de esqueleto de classe realmente básica que chamei de ‘redimensionar’. Observe a linha de comentário da variável de classe; é onde começaremos a adicionar nossas importantes variáveis de classe mais tarde.
A função de construção, conhecida como construtor, é um método de classe especial (o termo “método” é o mesmo que função, no entanto, quando se fala de classes e objetos, o termo método é frequentemente usado) que é chamado pela classe quando você cria um novo objeto. Isso torna adequado fazermos algumas inicializações – o que faremos na próxima etapa.
Class resize
{
// *** Class variables
public function __construct()
{
}
}
Observe que é um em dobro sublinhado para o método de construção.
4. Codifique o Construtor
Vamos modificar o método construtor acima. Primeiramente, passaremos o nome do arquivo (e o caminho) da nossa imagem a ser redimensionada. Chamaremos essa variável $fileName.
Precisamos abrir o arquivo passado com o PHP (mais especificamente a biblioteca PHP GD) para que o PHP possa ler a imagem. Estamos fazendo isso com o método personalizado openImage(). Eu vou chegar à implementação deste método em um momento, mas por enquanto, precisamos salvar o resultado como uma variável de classe. Uma variável de classe é apenas uma variável, mas é específica para essa classe. Lembre-se do comentário da variável de classe que mencionei anteriormente? Adicionar $image como uma variável privada digitando private $image;. Ao definir a variável como private, você está limitando o escopo dessa variável para que ela só possa ser acessada pela classe. A partir de agora podemos fazer uma chamada para nossa imagem aberta, conhecida como recurso, que faremos mais tarde quando redimensionarmos.
Já que estamos nisso, vamos armazenar a altura e a largura da imagem. Tenho a sensação de que estes serão úteis mais tarde.
Agora você deve ter o seguinte.
Class resize
{
// *** Class variables
private $image;
private $width;
private $height;
function __construct($fileName)
{
// *** Open up the file
$this->image = $this->openImage($fileName);
// *** Get width and height
$this->width = imagesx($this->image);
$this->height = imagesy($this->image);
}
}
Métodos imagesx() e imagesy() são funções internas que fazem parte da biblioteca GD. Eles recuperam a largura e a altura da sua imagem, respectivamente.
5. Abrindo a Imagem
Na etapa anterior, chamamos o método personalizado openImage(). Nesta etapa, vamos implementar a funcionalidade dentro desse método. Queremos que o script pense por nós, portanto, dependendo de qual tipo de arquivo é passado, o script deve determinar qual função da Biblioteca GD ele chama para abrir a imagem. Isso é facilmente alcançado comparando a extensão dos arquivos com uma instrução switch.
Extraímos a extensão do nome do arquivo usando o strrchr() função em PHP que retorna parte da string principal desde a última ocorrência do caractere especificado até seu final. Por exemplo, o nome do arquivo papaia.jpg vai nos dar .jpg e o nome do arquivo i.like.papaya.jpg também nos dará .jpg.
Depois de determinar a extensão, usamos o imagecreatefrom função para recuperar um recurso de imagem.
private function openImage($file)
{
// *** Get extension
$extension = strtolower(strrchr($file, '.'));
switch($extension)
{
case '.jpg':
case '.jpeg':
$img = @imagecreatefromjpeg($file);
break;
case '.gif':
$img = @imagecreatefromgif($file);
break;
case '.png':
$img = @imagecreatefrompng($file);
break;
default:
$img = false;
break;
}
return $img;
}
6. Como redimensionar
Este passo é realmente apenas uma explicação do que vamos fazer – então não há dever de casa aqui. Na próxima etapa, vamos criar um método público que chamaremos para realizar nosso redimensionamento; então faz sentido passar a largura e a altura, além de informações sobre como queremos redimensionar a imagem. Vamos falar sobre isso por um momento. Haverá cenários em que você gostaria de redimensionar uma imagem para um tamanho exato. Ótimo, vamos incluir isso. Mas também haverá momentos em que você terá que redimensionar centenas de imagens e cada imagem terá uma proporção diferente – pense em imagens de retrato. Redimensioná-los para um tamanho exato causará distorção severa. Se dermos uma olhada em nossas opções para evitar distorções, podemos:
- Redimensione a imagem o mais próximo possível de nossas novas dimensões de imagem, mantendo a proporção.
- Redimensione a imagem o mais próximo possível de nossas novas dimensões de imagem e corte o restante.
Ambas as opções são viáveis, dependendo de suas necessidades.
Sim. vamos tentar lidar com todos os itens acima. Para recapitular, vamos fornecer opções para:
- Redimensione por largura/altura exata. (
exact) - Redimensionar por largura—a largura exata será definida, a altura será ajustada de acordo com a proporção. (
width) - Redimensionar por altura—como redimensionar por largura, mas a altura será definida e a largura ajustada dinamicamente. (
height) - Determinar automaticamente as opções 2 e 3. Se você estiver percorrendo uma pasta com fotos de tamanhos diferentes, deixe o script determinar como lidar com isso. (
auto) - Redimensione e depois corte. Esse é meu favorito. Tamanho exato, sem distorção. (
crop)
7. Redimensionamento. Vamos fazer isso!
Existem duas partes para o método de redimensionamento. A primeira é obter a largura e a altura ideais para nossa nova imagem criando alguns métodos personalizados e, claro, passando nossa opção de redimensionamento conforme descrito acima. A largura e a altura são retornadas como uma matriz e definidas para suas respectivas variáveis. Sinta-se à vontade para passar como referência – mas não sou um grande fã disso.
A segunda parte é o que realiza o redimensionamento real. Usaremos duas funções internas do PHP para nosso redimensionamento. Eles são:
Eu recomendo que você leia sobre eles na documentação.
Em suma, o imagecreatetruecolor() A função retornará um objeto de imagem que representa uma imagem preta de tamanho especificado. o imagecopyresampled() A função é usada para copiar e redimensionar parte de uma imagem com reamostragem.
Também salvamos a saída do imagecreatetruecolor() método (uma nova imagem true color) como uma variável de classe. Adicionar private $imageResized; com suas outras variáveis de classe.
O redimensionamento é realizado por um módulo PHP conhecido como Biblioteca GD. Muitos dos métodos que estamos usando são fornecidos por esta biblioteca.
// *** Add to class variables
private $imageResized;
public function resizeImage($newWidth, $newHeight, $option="auto")
{
// *** Get optimal width and height - based on $option
$optionArray = $this->getDimensions($newWidth, $newHeight, strtolower($option));
$optimalWidth = $optionArray['optimalWidth'];
$optimalHeight = $optionArray['optimalHeight'];
// *** Resample - create image canvas of x, y size
$this->imageResized = imagecreatetruecolor($optimalWidth, $optimalHeight);
imagecopyresampled($this->imageResized, $this->image, 0, 0, 0, 0, $optimalWidth, $optimalHeight, $this->width, $this->height);
// *** if option is 'crop', then crop too
if ($option == 'crop') {
$this->crop($optimalWidth, $optimalHeight, $newWidth, $newHeight);
}
}
No snippet de código acima, calculamos as novas dimensões da imagem e criamos um objeto de imagem true color de acordo. Este objeto de imagem é então passado para imagecopyresampled() onde os dados da imagem original são copiados sobre ela. Qual parte é copiada depende do resto dos parâmetros.
8. A Árvore de Decisão
Quanto mais trabalho você fizer agora, menos terá que fazer ao redimensionar. Esse método escolhe a rota a ser seguida, com o objetivo de obter a largura e a altura de redimensionamento ideais com base na sua opção de redimensionamento. Ele chamará o método apropriado, do qual criaremos na próxima etapa.
private function getDimensions($newWidth, $newHeight, $option)
{
switch ($option)
{
case 'exact':
$optimalWidth = $newWidth;
$optimalHeight= $newHeight;
break;
case 'height':
$optimalWidth = $this->getSizeByFixedHeight($newHeight);
$optimalHeight= $newHeight;
break;
case 'width':
$optimalWidth = $newWidth;
$optimalHeight= $this->getSizeByFixedWidth($newWidth);
break;
case 'auto':
$optionArray = $this->getSizeByAuto($newWidth, $newHeight);
$optimalWidth = $optionArray['optimalWidth'];
$optimalHeight = $optionArray['optimalHeight'];
break;
case 'crop':
$optionArray = $this->getOptimalCrop($newWidth, $newHeight);
$optimalWidth = $optionArray['optimalWidth'];
$optimalHeight = $optionArray['optimalHeight'];
break;
}
return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight);
}
Neste ponto, estamos simplesmente chamando diferentes métodos auxiliares que implementaremos na próxima seção.
9. Dimensões ideais
Quando a opção de redimensionamento está definida para height ou widthusamos a proporção da imagem original para calcular a largura e a altura apropriadas para nossa nova imagem.
private function getSizeByFixedHeight($newHeight)
{
$ratio = $this->width / $this->height;
$newWidth = $newHeight * $ratio;
return $newWidth;
}
private function getSizeByFixedWidth($newWidth)
{
$ratio = $this->height / $this->width;
$newHeight = $newWidth * $ratio;
return $newHeight;
}
Quando a opção de redimensionamento está definida para auto, usamos a largura e a altura originais da imagem para determinar se a imagem redimensionada deve ter uma largura ou altura fixa. Para imagens na orientação paisagem, mantemos a largura fixa. Para imagens na orientação retrato, mantemos a altura fixa. Se a imagem original for um quadrado, escolhemos a dimensão fixa usando o novo valor de largura e altura.
private function getSizeByAuto($newWidth, $newHeight)
{
if ($this->height < $this->width)
// *** Image to be resized is wider (landscape)
{
$optimalWidth = $newWidth;
$optimalHeight= $this->getSizeByFixedWidth($newWidth);
}
elseif ($this->height > $this->width)
// *** Image to be resized is taller (portrait)
{
$optimalWidth = $this->getSizeByFixedHeight($newHeight);
$optimalHeight= $newHeight;
}
else
// *** Image to be resizerd is a square
{
if ($newHeight < $newWidth) {
$optimalWidth = $newWidth;
$optimalHeight= $this->getSizeByFixedWidth($newWidth);
} else if ($newHeight > $newWidth) {
$optimalWidth = $this->getSizeByFixedHeight($newHeight);
$optimalHeight= $newHeight;
} else {
// *** Square being resized to a square
$optimalWidth = $newWidth;
$optimalHeight= $newHeight;
}
}
return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight);
}
private function getOptimalCrop($newWidth, $newHeight)
{
$heightRatio = $this->height / $newHeight;
$widthRatio = $this->width / $newWidth;
if ($heightRatio < $widthRatio) {
$optimalRatio = $heightRatio;
} else {
$optimalRatio = $widthRatio;
}
$optimalHeight = $this->height / $optimalRatio;
$optimalWidth = $this->width / $optimalRatio;
return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight);
}
o getOptimalCrop() pode parecer um pouco confuso no começo porque ainda estamos calculando $optimalHeight e $optimalWidth que usamos para redimensionar. A razão é que em vez de cortar a imagem diretamente na largura e altura especificadas, nossa classe corta as imagens após o redimensionamento.
Digamos que as dimensões de uma imagem sejam 1920w e 1080h. Você deseja cortá-lo para 1200w e 200h. Como você pode ver, a proporção entre a largura original e a nova largura será menor que a proporção de altura correspondente. Portanto, a imagem será primeiro redimensionada de forma que sua largura seja reduzida para 1200 e a altura seja alterada de acordo.
O corte real da imagem será feito após a conclusão do redimensionamento.
10. Cortar
Se você optou por um corte, ou seja, se você usou a opção de corte, então você tem mais um pequeno passo. Vamos cortar a imagem do centro. O corte é um processo muito semelhante ao redimensionamento, mas com mais alguns parâmetros de dimensionamento.
private function crop($optimalWidth, $optimalHeight, $newWidth, $newHeight)
{
// *** Find center - this will be used for the crop
$cropStartX = ( $optimalWidth / 2) - ( $newWidth /2 );
$cropStartY = ( $optimalHeight/ 2) - ( $newHeight/2 );
$crop = $this->imageResized;
//imagedestroy($this->imageResized);
// *** Now crop from center to exact requested size
$this->imageResized = imagecreatetruecolor($newWidth , $newHeight);
imagecopyresampled($this->imageResized, $crop , 0, 0, $cropStartX, $cropStartY, $newWidth, $newHeight , $newWidth, $newHeight);
}
11. Salve a Imagem
Estamos chegando lá; quase pronto. Agora é hora de salvar a imagem. Passamos no caminho e a qualidade da imagem que gostaríamos variando de 0 a 100, sendo 100 o melhor, e chamamos o método apropriado. Algumas coisas a serem observadas sobre a qualidade da imagem: JPG usa uma escala de 0-100, sendo 100 a melhor. As imagens GIF não têm uma configuração de qualidade de imagem. PNGs fazem, mas eles usam a escala de 0-9, 0 sendo o melhor. Isso não é bom, pois não podemos esperar que nos lembremos disso toda vez que quisermos salvar uma imagem. Fazemos um pouco de mágica para padronizar tudo.
public function saveImage($savePath, $imageQuality="100")
{
// *** Get extension
$extension = strrchr($savePath, '.');
$extension = strtolower($extension);
switch($extension)
{
case '.jpg':
case '.jpeg':
if (imagetypes() & IMG_JPG) {
imagejpeg($this->imageResized, $savePath, $imageQuality);
}
break;
case '.gif':
if (imagetypes() & IMG_GIF) {
imagegif($this->imageResized, $savePath);
}
break;
case '.png':
// *** Scale quality from 0-100 to 0-9
$scaleQuality = round(($imageQuality/100) * 9);
// *** Invert quality setting as 0 is best, not 9
$invertScaleQuality = 9 - $scaleQuality;
if (imagetypes() & IMG_PNG) {
imagepng($this->imageResized, $savePath, $invertScaleQuality);
}
break;
// ... etc
default:
// *** No extension - No save.
break;
}
imagedestroy($this->imageResized);
}
Agora também é um bom momento para destruir nosso recurso de imagem para liberar um pouco de memória. Se você usar isso em produção, também pode ser uma boa ideia capturar e retornar o resultado da imagem salva.
Conclusão
Bom é isso pessoal. Obrigado por seguir este tutorial, espero que seja útil.
Este post foi atualizado com contribuições de Monty Shokeen. Monty é um desenvolvedor full-stack que também adora escrever tutoriais e aprender sobre novas bibliotecas JavaScript.
