Conversor PNG para WebP - HTML, CSS e JavaScript - Tutorial

Conversor PNG para WebP:

Descrição: A principal função deste conversor é permitir que os usuários façam o upload de imagens nos formatos mais comuns (PNG, JPEG, GIF, BMP.) e convertam estas imagens para o formato WebP, que oferece uma compressão mais eficiente, mantendo a qualidade da imagem.

O projeto foi desenvolvido para ser responsivo, garantindo que funcione de forma eficiente tanto em dispositivos móveis quanto em desktops. Ele também inclui funcionalidades que melhoram a experiência do usuário, como barra de progresso durante a conversão, ajuste de qualidade da imagem convertida e recarregamento automático da página após o download da imagem.

Funcionalidades Detalhadas:

1 - Upload de Vários Formatos de Imagem:

O conversor permite que o usuário carregue imagens em diferentes formatos como PNG, JPEG, GIF e BMP.  O usuário pode selecionar a imagem a ser convertida. Atributos como accept são usados para restringir os tipos de imagens que podem ser carregados.

2 - Conversão de Imagens para o Formato WebP:

A funcionalidade principal do projeto é a conversão de imagens carregadas para o formato WebP. O Canvas API do navegador é usado para realizar essa conversão. A imagem carregada pelo usuário é processada no canvas, onde o conteúdo da imagem é desenhado. Em seguida, o conteúdo do canvas é convertido para o formato WebP através do método canvas.toDataURL('image/webp').

3 - Ajuste Dinâmico da Qualidade da Imagem WebP:

O usuário pode ajustar a qualidade da imagem WebP antes de realizar a conversão, utilizando um slider (input type="range"). A qualidade pode variar de 1% (maior compressão, menor qualidade) a 100% (sem compressão, máxima qualidade). O valor da qualidade é utilizado no método canvas.toDataURL('image/webp', quality), onde o parâmetro quality determina a compressão aplicada à imagem convertida.

4 - Exibição da Imagem Convertida:

Após a conversão da imagem, a imagem WebP resultante é exibida ao usuário no próprio navegador. A tag  é usada para mostrar a imagem convertida com o atributo src preenchido pela URL de dados gerada pelo canvas.toDataURL.

5 - Download da Imagem Convertida:

O usuário pode fazer o download da imagem WebP convertida clicando no link de download que é gerado dinamicamente. O nome original da imagem carregado é mantido, com a extensão alterada para .webp. Isso é feito extraindo o nome original da imagem e removendo sua extensão, e, em seguida, concatenando .webp para o novo nome.

6 - Barra de Progresso Durante a Conversão:

Para melhorar a experiência do usuário, o projeto inclui uma barra de progresso que é exibida enquanto a imagem está a ser processada e convertida. A barra de progresso é atualizada em três etapas: início (30%), processamento (70%) e finalização (100%). A barra é então ocultada quando a conversão é concluída.

7 - Recarregamento Automático da Página Após o Download:

Uma vez que o usuário clica no link de download da imagem convertida, a página é automaticamente recarregada após um curto intervalo (2 segundos). Isso garante que o conversor volte ao seu estado inicial, pronto para converter novas imagens sem que o usuário precise atualizar a página manualmente.

8 - Design Responsivo:

O projeto foi desenvolvido com CSS responsivo, adaptando-se a diferentes tamanhos de tela, desde dispositivos móveis a desktops. A interface mantém-se simples e eficiente, com botões, sliders e barras de progresso fáceis de usar em qualquer dispositivo.

Explicação das Tecnologias Utilizadas:

1 - HTML:

A estrutura básica da aplicação é feita em HTML, com tags semânticas que definem a interface de usuário e interagem com o JavaScript. O formulário para carregar a imagem (), o slider de ajuste de qualidade e o link para download são os principais componentes da interface.

2 - CSS:

O CSS é utilizado para estilizar a aplicação, garantindo que tenha uma aparência moderna e atraente, com cores suaves e transições. A responsividade é garantida através de media queries, que ajustam o layout e o tamanho dos elementos dependendo do dispositivo usado.

3 - JavaScript:

JavaScript é a principal linguagem de programação usada para manipular as imagens, interagir com o usuário e controlar a lógica de conversão. O FileReader API é utilizado para ler os arquivos carregados pelo usuário e o Canvas API é usado para desenhar e converter a imagem para WebP. O JavaScript também gera a lógica do slider de qualidade, a barra de progresso e o recarregamento automático da página.

Veja o Conversor PNG para WebP em funcionamento neste link. Conversor PNG para WebP.

Veja o vídeo no YouTube:

Começando o Tutorial:

1° Passo: Abra seu VS Code, ou qualquer IDE da sua preferência e crie três pastas com os nomes... index.html, style.css e script.js.

Logo em seguida copie o código html abaixo e cole na pasta "index.html".

<!DOCTYPE html> 

<html  lang= "pt-br" > 

<head> 

    <meta  charset= "UTF-8" > 

    <meta  name= "viewport"  content= "width=device-width, initial-scale=1.0" > 

    <title> Conversor PNG para WebP </title> 

    <link  rel= "stylesheet"  href= "style.css" > 

</head> 

<body> 

    <h1> Conversor PNG para WebP </h1> 

    <input  type= "file"  id= "inputImagem"  accept= "image/png, image/jpeg, image/jpg, image/gif, image/bmp" > 

    <label  id= "qualityLabel"  for= "qualityRange" > Qualidade da imagem WebP: <span  id= "qualityValue" > 80 </span> % </label> 

    <input  type= "range"  id= "qualityRange"  min= "1"  max= "100"  value= "80" > 

    <div  id= "progressBar" > 

        <div  id= "progressFill" ></div> 

    </div> 

    <canvas  id= "canvas"  style= "display:none;" </canvas> 

    <img  id= "imagemWebp"  alt= "Imagem WebP convertida"  style= "display: none;" > 

    <a  id= "downloadLink"  href= "#"  download= "imagem_convertida.webp"  style= "display:none;" > Descarregar Imagem WebP </a> 

    <script src= "script.js" </script> 

</body> 

</html>

        

2° Passo: Copie o código abaixo e cole na pasta "style.css".

body {

    font-family: Arial, sans-serif;

    background-color: #f4f4f9;

    color: #333;

    margin: 0;

    padding: 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 100vh;

}

h1 {

    color: #4a90e2;

}

#inputImagem {

    padding: 10px;

    border: 2px solid #4a90e2;

    border-radius: 5px;

    cursor: pointer;

    background-color: white;

    transition: background-color 0.3s ease;

}

#inputImagem:hover {

    background-color: #e1f0ff;

}

#imagemWebp {

    max-width: 100%;

    border: 2px solid #ddd;

    border-radius: 5px;

    margin-top: 20px;

    display: none;

}

#downloadLink {

    display: inline-block;

    margin-top: 20px;

    padding: 10px 20px;

    background-color: #4a90e2;

    color: white;

    text-decoration: none;

    border-radius: 5px;

    transition: background-color 0.3s ease;

    display: none;

}

#downloadLink:hover {

    background-color: #357ABD;

}

#qualityLabel {

    margin-top: 20px;

}

#qualityRange {

    width: 100%;

    max-width: 400px;

}

#progressBar {

    margin-top: 20px;

    width: 100%;

    max-width: 400px;

    height: 10px;

    background-color: #ddd;

    border-radius: 5px;

    overflow: hidden;

    display: none;

}

#progressFill {

    width: 0;

    height: 100%;

    background-color: #4a90e2;

    transition: width 0.3s;

}

@media (max-width: 600px) {

    body {

        padding: 10px;

    }

    h1 {

        font-size: 24px;

        text-align: center;

    }

    #downloadLink {

        width: 100%;

        text-align: center;

        padding: 15px;

    }

}

        

3° Passo: Copie o código abaixo e cole na pasta "script.js".

const inputImagem = document

 .getElementById('inputImagem');

const canvas = document.getElementById(

 'canvas');

const progressBar = document

 .getElementById('progressBar');

const progressFill = document

 .getElementById('progressFill');

const imagemWebp = document

 .getElementById('imagemWebp');

const downloadLink = document

 .getElementById('downloadLink');

const qualityRange = document

 .getElementById('qualityRange');

const qualityValue = document

 .getElementById('qualityValue');

// Atualiza o valor da qualidade no label ao mover o slider

qualityRange.addEventListener('input',

 function() {

  qualityValue.textContent =

   qualityRange.value;

 });

inputImagem.addEventListener('change',

 function(event) {

  const file = event.target.files[0];

  if (!file) return;

  // Extrair o nome do ficheiro original (sem a extensão)

  const originalName = file.name

   .split('.').slice(0, -1).join('.');

  const reader = new FileReader();

  reader.onload = function(e) {

   const img = new Image();

   img.src = e.target.result;

   img.onload = function() {

    // Atualizar barra de progresso (início)

    progressBar.style.display =

     'block';

    progressFill.style.width =

     '30%';

    // Definir o tamanho do canvas de acordo com a imagem carregada

    canvas.width = img.width;

    canvas.height = img.height;

    const ctx = canvas.getContext(

     '2d');

    ctx.drawImage(img, 0, 0);

    // Ajustar a qualidade com base no slider

    const qualidade = qualityRange

     .value / 100;

    // Converter o conteúdo do canvas para WebP

    const webpDataUrl = canvas

     .toDataURL('image/webp',

      qualidade);

    // Atualizar barra de progresso (quase completo)

    progressFill.style.width =

     '70%';

    // Mostrar a imagem convertida

    imagemWebp.src = webpDataUrl;

    imagemWebp.onload = function() {

     // Atualizar barra de progresso (completo)

     progressFill.style.width =

      '100%';

     // Mostrar o link de download e a imagem convertida

     downloadLink.href =

      webpDataUrl;

     downloadLink.download =

      originalName +

      '.webp'; // Manter o nome original e usar extensão .webp

     downloadLink.style.display =

      'inline-block';

     imagemWebp.style.display =

      'block';

     // Ocultar barra de progresso após um pequeno atraso

     setTimeout(() => {

      progressBar.style.display =

       'none';

      progressFill.style.width =

       '0';

     }, 500);

    };

   };

  };

  reader.readAsDataURL(file);

 });

// Adicionar evento de clique ao link de download

downloadLink.addEventListener('click',

 function() {

  // Esperar um curto intervalo para o download iniciar e recarregar a página

  setTimeout(() => {

    location

     .reload(); // Recarregar a página após o download

   },

   2000

  ); // O atraso garante que o download tenha tempo de ser processado

 });

        

4° Passo: Testar o Projeto!

Agora, com os três arquivos (index.html, style.css, e script.js) criados, você pode abrir o index.html no seu navegador e ver seu projeto funcionando perfeitamente!

Se preferir os códigos estão no meu Repositório no GitHub.