Compartilhar via

Azure Function – otimizar e redimensionar imagem

  • Artigo

Imagine vocês usando o Cloud Storage para armazenar as imagens enviados através do Upload na sua aplicação, por serem imagens enviados pelos usuários, pode ser muito complicado controlar os pré-requisitos de formato, tamanho e etc... mesmo contornando estas situações, levando em conta que o acesso à Internet pelos dispositivos moveis já ultrapassaram a forma tradicional, muitas das vezes você precisará otimizar a imagem enviada para exibir o conteúdo em diferentes dispositivos, este artigo irá explorar recurso do Serverless que poderá lhe auxiliar nesta tarefa, faremos um passo-a-passo que irá orientar para criar uma Função que redimensiona a imagem otimizando-o sem perde qualidade e gerar 3 tamanhos diferentes (grande, médio e Thumbnail) a função será executada todas as vezes que um nova imagem for colocada na pasta do Upload, vamos lá:

  1. Acesso o http://portal.azure.com/ (se você ainda não tem conta crie uma veja aqui), após autenticar, pesquise por Funções, Seleciona a opção “Aplicativo de Função”, será aberta uma janela ao lado em seguida clique no botão “Criar”. https://raw.githubusercontent.com/Ulili/artigos/master/PublicacaoArtigos/Nuvens/Serverless/Azure-SASTokenGenerator/2-%20Criar.jpg
  2. Será aberta Formulário de criação da Função com os seguintes campos:
    1. Nome do aplicativo: nome único no azure para a hospedagem da sua aplicação, será complementado com o sufixo .azurewebsites.net para compor a URL base das sua aplicação que ficará assim https://[Nome do aplicativo].azurewebsites.net  
    2. Assinatura: sua assinatura de cobrança/Centro de custo;
    3. Grupo de recursos: é uma coleção de recursos que compartilha o mesmo ciclo de vida, permissões e políticas.
    4. Plano de hospedagem: atualmente são dois planos que a Microsoft disponibilizou são eles: O plano de Consumo permite-lhe pagar por execução e alocar dinamicamente os recursos baseados no carregamento de seu aplicativo e Os Planos do Serviço de Aplicativo permitem-lhe usar uma alocação de capacidade predefinida com escala e custos previsíveis.
    5. Localização: zona (datacenter) do Azure onde será hospedada. 
    6. Armazenamento: É necessária uma conta de armazenamento (Cloud Storage) que oferece suporte a Blob, Fila e Armazenamento de Tabela. Ao usar um plano de Consumo, as definições de função são armazenadas no Armazenamento de Arquivos.
    7. Application Insights: ajuda você a detectar e diagnosticar problemas de qualidade em seus aplicativos, além de permitir a você entender o que os usuários realmente fazem com o seu aplicativo.                                       https://raw.githubusercontent.com/Ulili/artigos/master/PublicacaoArtigos/Nuvens/Serverless/Azure-SASTokenGenerator/3%20-%20Formulario.jpg
  3.  Após preencher o formulário com as suas opções, será criada a sua aplicação Serverless, depois de alguns minutos estará pronto para uso, para o primeiro contato com a sua aplicação, clique nela ao abrir, crlica no + a direita da opção Functions, será aberta uma janela com orientações para criar a primeira Função, selecione uma linguagem para criar uma espécie de “Hello World” conforme mostra a imagem a baixo https://raw.githubusercontent.com/Ulili/artigos/master/PublicacaoArtigos/Nuvens/Serverless/Azure-SASTokenGenerator/4%20-%20CriarFuncao.jpg
  4. Após criar a sua primeira Função, acesse-o clicando nele para visualizar e editar o código direto no portal, nesta demonstração escolhi C# + Http foi criada uma função que aguarda uma requisição podendo ter parâmetro “name” e verifica se o parâmetro foi enviado caso sim é concatenado ao “Hello” e enviada na resposta da requisição.                                                                  https://raw.githubusercontent.com/Ulili/artigos/master/PublicacaoArtigos/Nuvens/Serverless/Azure-SASTokenGenerator/5%20-%20PrimeiroCodigo.jpg
  5. Já com a nossa primeira função “Hello World” no ar, vamos criar a função redimencionar imagem. Clique de novo no + a direita do Functions, aparecerá uma tela com os templates de Functions com as opções de Linguagem e cenários, o Azure disponibilizou dezenas de templates para lhe facilitar na construção de Functions para vários cenários e diferentes linguagens, para o nosso passo-a-passo vamos usar um para redimensionar imagem todas as vezes que forem feitas Uploads no Azure Storage.                                                                https://raw.githubusercontent.com/Ulili/artigos/master/PublicacaoArtigos/Nuvens/Serverless/Azure-SASTokenGenerator/7%20-%20Resize.jpg    
  6. Após selecionar o seu template, será aberta um formulário à baixo com as seguintes opções:
    1. Name your function: nome da sua função, será usada para compor a Endpoint da função.
    2. Azure Blob Storage trigger: com os campos “path” para informar o diretório do Storage que será monitorado e “Storage account connection” que é a conexão que será usada para conectar ao storage.
    3. Azure Blob Storage output: são duas áreas de output para informar o diretório onde as imagens otimizadas serão armazenadas, os campos “path” já vêm sugerindo sample-images-sm/{name} e sample-images-md/{name} onde o nome será mantida os diretórios sm e md receberão as imagens geradas e “Storage account connection” as conexões que serão usadas para acessar o Storage.https://raw.githubusercontent.com/Ulili/artigos/master/PublicacaoArtigos/Nuvens/Serverless/Azure-SASTokenGenerator/7%20-%20Resize%20Formulario.jpg
  7. Sua função já está pronta para ser usada, mas, antes de começar a usar podemos dar uma olhada no código, e fazer pequenas alterações para que ela possa gerar uma terceira imagem que será o Thumbnail (100x100). O nome que você deu a sua função aparecerá no menu de arvore das funções a esquerda, selecione-o e veja o código conforme mostra a imagem.                                   https://raw.githubusercontent.com/Ulili/artigos/master/PublicacaoArtigos/Nuvens/Serverless/Azure-SASTokenGenerator/9%20-%20ResizeCode.jpg
  8. Vamos acrescentar mais um parâmetro de saída “Stream imageThumbnail” e algumas linhas de código para gerar imagem 100x100, mais opções de geração de imagem podem ser encontradas na documentação do imageresizing.net após a alteração o código ficará assim: https://raw.githubusercontent.com/Ulili/artigos/master/PublicacaoArtigos/Nuvens/Serverless/Azure-SASTokenGenerator/8%20-%20TrechoCodigo.JPG
  9. Tudo pronto é só gravar e a Função já está pronto para Redimensionar Imagem todas as vezes que o Upload for realizado no “path” do Azure Storage informado, no caso deste artigo todas as vezes que a imagem for enviada para o diretório Upload será otimizada e gerada as três versões para imagens-md, imagens-sm e imagens-thumbnail, se os diretórios não existirem serão criadas no primeiro processamento, neste link você encontra artigo com passa a passo para enviar Upload para Azure Storage já fazendo o uso da Função deste artigo.  https://raw.githubusercontent.com/Ulili/artigos/master/PublicacaoArtigos/Nuvens/Serverless/Azure-SASTokenGenerator/11-%20ResizeCompleto.jpg
  10. A função já está pronto para o uso, é possível explorar mais opções como permissão, CORS, e etc. Para uma boa pratica vamos acessar o console associar um repositório GIT e fazer o commit para versionar a nossa função. Para isso clique no nome da função em seguida selecione a tab “Platform features” e clique a opção console.                                                                       https://raw.githubusercontent.com/Ulili/artigos/master/PublicacaoArtigos/Nuvens/Serverless/Azure-SASTokenGenerator/14%20-PlatformFeatures.jpg
  11. O Azure já disponibiliza o console com o GIT, faça o uso dos comandos GIT para versionar o seu código no seu repositório.   https://raw.githubusercontent.com/Ulili/artigos/master/PublicacaoArtigos/Nuvens/Serverless/Azure-SASTokenGenerator/15%20-%20ConsoleGit.jpg

Explore as possibilidades que o Serverless nos oferece e faça o bom proveito desta tecnologia maravilhosa. Segue o link do GitHu.com onde você pode encontrar todos os códigos deste passo-a-passo e as imagens.

Código fonte: https://github.com/Ulili/FuncoesServerLess 
Imagens: https://github.com/Ulili/artigos/tree/master/PublicacaoArtigos/Nuvens/Serverless/Azure-SASTokenGenerator