Em artigos anteriores do Manual de Canvas estivemos vendo como incluir imagens, ou seja, como desenhar o conteúdo de uma imagem na tela de um elemento canvas do HTML 5. Seguiremos com as explicações no presente texto, oferecendo algumas notas adicionais sobre o tratamento de imagens em Canvas, que nos permitirão redimensionar e recortar as imagens antes de pintá-las.

O método é bem simples e consiste em invocar o método que desenha as imagens, drawImage(), enviando diferentes jogos de parâmetros. Anteriormente já havíamos trabalhado com este método, que como devemos saber, pertence ao objeto contexto de um canvas. No passado o chamamos simplesmente enviando a imagem e as coordenadas onde havia que colocá-la. Agora, vamos ver os outros dois modos de invocá-lo, por meio de parâmetros adicionais, que nos faltam conhecer. O primeiro dos modos de invocação permite fazer a escala de uma imagem e o segundo recortá-la e escalá-la em um mesmo passo.

Escalar uma imagem

Redimensionar uma imagem é simples. Só temos que invocar o método drawImage() enviando, além disso, as dimensões da imagem que queremos que se desenhe. O navegador fará a escala da imagem para que tenha as dimensões que indiquemos e depois a pintará no canvas.

As novas dimensões da imagem a ser desenhada podem ser as que desejemos. Podem, inclusive, não ser proporcionais às dimensões atuais, nesse caso o navegador estirará a imagem ou a achatará para adaptá-la à largura e à altura que tenhamos indicado.

A maneira de chamar este método do contexto do canvas é a seguinte:

drawImage(imagem, posX, posY, largura, altura);

Este método desenhará a imagem na posição definida pelas coordenadas (posX, posY) e com a largura e a altura dadas nos últimos dois parâmetros.

Assim que podemos ver um exemplo de código fazendo a escala da imagem:

var ctx = cargaContextoCanvas('meucanvas');
if(ctx){
   //Crio uma imagem com um objeto Image de Javascript
   var img = new Image();
   //indico a URL da imagem
   img.src = 'logo-desarrolloweb.gif';
   //defino o evento onload do objeto imagem
   img.onload = function(){
      //incluo a imagem no canvas escala muito pequena
      ctx.drawImage(img, 0, 0, 50 , 24);
      //um pouco maior
      ctx.drawImage(img, 70, 10, 80 , 38);
      //tamanho natural
      ctx.drawImage(img, 160, 20);
   }
}

Este exemplo desenha a mesma imagem três vezes, duas delas com escalas de diferentes dimensões e a última está no tamanho natural (sem redimensionar).

Você pode ver o exemplo em funcionamento em uma página à parte.

Recortar e fazer escala de uma imagem

O último modo de invocar o método drawImage() é um pouco mais complexo, já que temos que indicar todos os dados para poder recortar e fazer a escala da imagem antes de desenhá-la no canvas. A chamada terá estes parâmetros:

drawImage(imagem, imgX, imgY, imglargura, imgAltura, telaX, telaY, telaLargura, TelaAltura)

Entre os parâmetros, "imagem" continua sendo o objeto imagem Javascript que queremos pintar. Podemos entender todos os parâmetros seguintes à vista da seguinte imagem:

Podemos ver a continuação o código de um exemplo que realiza o recorte e a escala de uma imagem.

var ctx = cargaContextoCanvas('meucanvas');
if(ctx){
   //Crio uma imagem com um objeto Image de Javascript
   var img = new Image();
   //indico a URL da imagem
   img.src = 'sagrada-familia.jpg';
   //defino o evento onload do objeto imagem
   img.onload = function(){
      ctx.drawImage(img, 177, 11, 120 , 234, 10, 10, 90, 176);
      //tamanho natural
      ctx.drawImage(img, 160, 20);
   }
}

Este exemplo desenha uma imagem duas vezes. Primeiro recorta uma área da imagem original e faz a escala, pelo método de drawImage() que acabamos de relatar. Em seguida desenha a imagem original, sem recortar nem fazer escala, e a coloca ao lado da outra, no mesmo canvas.

Para terminar, deixamos um link, de modo que você possa ver este segundo exemplo de trabalho com imagens em canvas.