‫-: Neste vídeo, você aprenderá sobre processamento
‫e manipulação de imagens com Node JS
‫e, neste caso específico,
‫vamos redimensionar e converter nossas imagens.
‫Portanto, em toda a nossa interface
‫de usuário, presumimos que as imagens carregadas são quadrados.
‫Para que possamos
‫exibi-los como círculos como este.
‫E isso só funciona quando eles são
‫quadrados, mas é claro
‫que no mundo real os usuários raramente farão upload
‫de imagens que sejam quadrados.
‫Portanto, nosso trabalho agora
‫é redimensionar as imagens para torná-las quadradas.
‫Tudo bem, então aqui está como vamos fazer isso.
‫Vamos adicionar outro middleware antes de me atualizar e
‫então esse middleware cuidará
‫do processamento real da imagem.
‫Tudo bem, então vamos fazer isso aqui no código
‫logo depois desse,
‫porque eles estão meio que conectados, não estão?
‫Então, exporta
‫ponto, redimensiona a foto do usuário.
‫E antes de continuarmos, vamos
‫adicionar esse middleware à pilha de middleware
‫nesta rota específica.
‫Isso está nas
‫rotas do usuário, e aqui, logo
‫após a
‫foto ser carregada neste middleware, iremos redimensioná-la.
‫Portanto, redimensione e aqui está o
‫controlador do usuário.
‫Tudo bem.
‫Vamos descer
‫aqui e voltar.
‫E então, neste ponto, já temos
‫o arquivo de nosso pedido.
‫Pelo menos se houve um upload
‫e se não houve
‫upload, é claro que não queremos fazer nada.
‫Isso significa que queremos ir para o próximo middleware.
‫Portanto, se não houver nenhum
‫arquivo na solicitação, retorne imediatamente e vá para a próxima.
‫Ok, mas caso contrário, é claro, então
‫queremos fazer o redimensionamento da imagem.
‫E para isso vamos usar o pacote Sharp.
‫Tudo bem.
‫Então, antes de mais nada, vamos realmente instalá-lo.
‫Então o MPM instale o sharp Alright,
‫e já que ele está fazendo seu trabalho,
‫vamos colocar isso aqui já.
‫Tão
‫afiado, e exige, afiado.
‫E sharp é uma biblioteca de
‫processamento de imagem muito boa e fácil de usar para Node Js. E
‫há muitas coisas que podemos
‫fazer com ela.
‫Mas onde realmente brilha é
‫para redimensionar imagens de uma forma muito simples.
‫E é exatamente isso que estamos procurando aqui.
‫Tudo bem.
‫Então, dizemos sustenido e aqui basicamente precisamos
‫passar o arquivo.
‫Agora, ao fazer um processamento de
‫imagem assim logo após
‫enviar um arquivo, é sempre melhor nem mesmo
‫salvar o arquivo no disco, mas salvá-lo na memória.
‫Já falamos sobre isso
‫antes, e agora vamos fazer isso na prática.
‫Ok, então para isso precisamos mudar um
‫pouco a configuração do multer e, na
‫verdade, apenas esse armazenamento do
‫multer, porque agora não precisamos mais de nada disso.
‫E, em vez
‫de armazenamento multer, será simplesmente armazenamento de memória multer dot.
‫E assim, ok?
‫E como mencionei antes,
‫dessa forma a imagem será armazenada como um buffer.
‫E então esse buffer está
‫disponível sob solicitação. Arquivo dot buffer e é muito mais eficiente
‫assim, ao invés de ter que
‫gravar o arquivo no disco e então
‫lê-lo novamente.
‫Nós simplesmente mantemos a imagem basicamente
‫na memória e então aqui podemos ler isso, certo?
‫De qualquer forma, chamar a
‫função sharp desta forma criará um objeto no qual
‫podemos encadear vários métodos para fazer nosso processamento de imagem.
‫E então o primeiro que vamos fazer é redimensionar.
‫Então, redimensione e aqui podemos especificar a
‫largura e a altura.
‫Digamos 500 e 500, portanto, lembre-se de que
‫queremos imagens quadradas e, claro,
‫a altura precisa ser igual
‫à largura.
‫Agora, isso irá recortar a
‫imagem de modo que cubra todo esse quadrado 500 vezes 500.
‫E, na verdade,
‫podemos mudar esse comportamento padrão, se quisermos.
‫E então, vamos novamente, dar uma olhada
‫rápida na documentação.
‫Então, digamos, github sharp, mas na verdade seu próprio
‫site é um pouco
‫melhor, um pouco mais completo.
‫Então, vamos clicar nesse link aqui, e então aqui podemos passar
‫ao redimensionamento, que é o que estamos
‫fazendo no momento e aqui
‫está o que eu estava falando.
‫Tudo bem, então o padrão aqui é que
‫a imagem será cortada
‫para cobrir ambas as dimensões fornecidas.
‫Mas também podemos escolher conter, preencher, dentro ou fora.
‫E faríamos isso definindo as opções aqui.
‫Assim, podemos definir a largura, altura e, em seguida, como
‫uma terceira opção, podemos definir
‫este objeto de opções onde podemos definir o ajuste.
‫Também podemos definir a posição, que é
‫o centro por padrão.
‫Você vê que há todos os
‫tipos de coisas que poderíamos realmente definir para ajustar o
‫nosso processamento de imagem.
‫Mas, neste caso, o que temos é o suficiente.
‫Então, vamos passar para a próxima etapa.
‫Porque o que eu quero fazer
‫a seguir é converter as imagens sempre para jpeg, ok?
‫E para isso, usamos para formatar
‫e, em seguida, jpeg.
‫Também podemos definir a qualidade desse JPEG.
‫Então basicamente para compactá-lo
‫um pouco para que não
‫ocupe muito espaço e então para isso, usamos
‫o método jpeg, e configuramos uma opção neste objeto com qualidade e
‫digamos 90 por cento aqui, certo?
‫Cada método em sua própria linha é
‫muito melhor, mas na verdade ainda não terminamos.
‫Estamos quase terminando, mas não totalmente.
‫Porque agora, no
‫final, nós finalmente queremos gravá-lo em um arquivo em nosso disco.
‫E então, para isso, podemos usar para file, agora
‫esse método aqui realmente precisa
‫de todo o caminho para o arquivo.
‫Basicamente, imagens públicas,
‫barra, usuários e, finalmente, aqui
‫o nome do arquivo, certo?
‫Então, vamos tirar isso
‫do que tínhamos aqui antes.
‫Claro, queremos que nossas imagens tenham
‫um formato semelhante.
‫Tudo bem, então vamos copiar isso.
‫Mas, na verdade, não vou colocar isso bem aqui.
‫Em vez disso, irei
‫salvá-lo para solicitar o arquivo dot nome do arquivo.
‫Agora, por que estou fazendo assim?
‫Bem, é porque agora este nome de
‫arquivo não está definido.
‫Portanto, quando decidimos salvar a imagem na memória como um buffer, o
‫nome do arquivo não será realmente definido, mas realmente precisamos
‫desse nome de arquivo
‫em nossa outra função de middleware, certo?
‫Então, isso está aqui embaixo em atualizar-me bem aqui.
‫Portanto, contamos com o nome do arquivo ponto do arquivo
‫do pedido para salvar o nome do arquivo em nosso banco de dados, certo?
‫E então, na verdade, devemos definir isso.
‫E assim, anteriormente, era claro
‫que era definido pelo upload do multer que
‫tínhamos, mas como isso acabou agora, devemos basicamente redefini-lo aqui.
‫OK?
‫Então aqui, na verdade, podemos
‫nos livrar dessa parte da extensão, porque
‫já sabemos que sempre será um jpeg.
‫Por causa disso formatar, ok?
‫E aqui, podemos simplesmente colocar jpeg.
‫Portanto, não há necessidade de obter a extensão do arquivo.
‫E agora
‫aqui, podemos usar isso.
‫Req dot file dot nome do arquivo, e
‫é realmente isso.
‫OK?
‫Portanto, tudo o que precisamos
‫fazer agora para terminar é, então, realmente chamar o próximo middleware na pilha.
‫E essa será a função de manipulador de atualização.
‫Então, é claro, vamos testar isso agora.
‫Então, não precisamos mais desse.
‫Vamos ao Postman e
‫agora o usuário
‫que desejo atualizar se chama arrav, acho.
‫Vamos dar uma olhada aqui em nossos dados rapidamente.
‫E então sim, então esta é a imagem não quadrada
‫que iremos enviar agora e na verdade
‫você vê o tamanho aqui
‫que é 1000 vezes 1500, e então vamos
‫comparar isso mais tarde com nossa
‫imagem carregada redimensionada.
‫Tudo bem.
‫De qualquer forma, vamos obter o
‫nome para arrav Na verdade não precisamos, eles são
‫sempre os mesmos então arrav assim, então vamos fazer o login.
‫Para que possamos atualizá-lo
‫e você ver que agora a imagem aqui é o usuário 11.
‫E só para ver isso
‫um pouco melhor, vamos realmente
‫atualizar, vamos realmente fazer login, em nosso aplicativo da web usando
‫esse usuário.
‫Então teste um, dois, três, quatro.
‫Tudo bem, essa é a imagem
‫atual e agora vamos atualizá-la.
‫Selecione os arquivos, e aqui está a
‫nossa imagem, abra isso e vamos ver o que acontece.
‫E terminamos.
‫Na verdade, foi muito
‫rápido, então vamos ver se está correto.
‫Bem, pelo menos o nome aqui parece correto.
‫Se dermos uma olhada em nossos usuários agora aqui, isso
‫é público ou aqui mesmo.
‫Então esse deveria ser o que
‫realmente não é.
‫E, na verdade, não está em lugar nenhum.
‫Vamos recarregar, ah, e
‫aqui está.
‫Agora, esse é o único.
‫Então você vê que agora é 500 vezes
‫500, é muito
‫menor aqui, então 55 em comparação com os 315 que tínhamos antes.
‫Isso é muito
‫melhor e, como você verá aqui, agora
‫deve ser atualizado aqui também.
‫E isso é perfeito.
‫Portanto, o rosto está realmente bem no meio aqui.
‫Então esse redimensionamento foi realmente perfeito.
‫Legal.
‫E espero que você encontre
‫alguma utilidade para esse tipo de
‫processamento de imagens também em seus próprios aplicativos.
‫Então, apenas para recapitular rapidamente o que fizemos aqui.
‫Bem, nós criamos uma nova função de
‫middleware que será executada logo após
‫o upload da foto.
‫E esse upload agora está realmente
‫acontecendo em um buffer e não mais diretamente no sistema de arquivos.
‫Direito?
‫E é por isso que usamos esse armazenamento de
‫memória aqui, mas é claro que este filtro de multer
‫aqui ainda está funcionando.
‫E então nós ainda podemos apenas fazer upload de imagens, certo?
‫Então, aqui nesse middleware, colocamos o nome do
‫arquivo da imagem no nome
‫do arquivo ponto do arquivo do pedido
‫para que possamos usá-lo no update me.
‫Tudo bem, e aqui temos o
‫próprio processamento de imagem real.
‫Onde primeiro o redimensionamos para um
‫quadrado e depois formatamos
‫para jpeg com uma qualidade de 90
‫por cento e, finalmente, gravamos esse arquivo em
‫nosso sistema de arquivos exatamente na mesma pasta que especificamos também antes.
‫Tudo bem, então é assim que funciona
‫quando você precisa de
‫algum processamento de imagem, mas se você
‫não precisar, é claro que pode continuar usando assim, ok?
‫E é muito importante que
‫aprendamos como fazer
‫isso das duas maneiras aqui.
‫Tudo bem, a seguir, no
‫próximo vídeo, faremos este formulário aqui funcionar para
‫que possamos enviar as fotos
‫dos usuários diretamente daqui.