Como salvar uma imagem de um Canvas HTML

Neste artigo você verá como salvar uma imagem de um Canvas HTML, vamos utilizar JavaScript e também uma abordagem simples!

Fala programdor(a), beleza? Bora aprender mais sobre Canvas e JavaScript!

Salvar uma imagem a partir de um HTML canvas é uma tarefa simples, mas pode ser um pouco confusa para aqueles que não estão familiarizados com o processo.

O canvas é uma área no HTML onde é possível desenhar e manipular gráficos usando JavaScript.

Para salvar uma imagem do canvas, primeiro é preciso obter uma referência para o elemento canvas na página HTML. Isso pode ser feito usando o método getElementById do JavaScript.

Por exemplo, se o canvas tiver o ID “myCanvas”, você pode obter uma referência para ele usando o código abaixo:

const canvas = document.getElementById("myCanvas");

Uma vez que você tenha uma referência para o canvas, você pode usar o método toDataURL para obter a imagem em formato de URL.

Este método retorna uma string que representa a imagem do canvas em um formato específico, como PNG ou JPEG. Por exemplo, para obter a imagem do canvas como PNG, você pode usar o código abaixo:

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

const imgData = canvas.toDataURL("image/png");

Agora que você tem a imagem em formato de URL, você pode usar o método download para baixar a imagem para o dispositivo do usuário.

É necessário criar um elemento <a> e definir o atributo href como a URL da imagem e o atributo download com o nome do arquivo.

Por exemplo, para baixar a imagem com o nome “minha-imagem.png”, você pode usar o código abaixo:

const link = document.createElement("a");
link.href = imgData;
link.download = "minha-imagem.png";
link.click();

Em resumo, para salvar uma imagem a partir de um HTML canvas, é necessário obter uma referência para o canvas, obter a imagem em formato de URL usando o método toDataURL e baixar a imagem para o dispositivo do usuário usando o método download.

É importante notar que, navegadores diferentes podem ter suporte diferente para métodos e atributos descritos acima.

Certifique-se de testar seu código em diferentes navegadores para garantir que ele funcione corretamente.

E para enviar essa imagem a um servidor?

Para enviar uma imagem para um servidor a partir de um HTML canvas usando somente o método fetch() e sem a utilização de objetos FormData, você pode seguir os seguintes passos:

Obtenha a imagem a partir do canvas, como mencionado anteriormente, usando o método toDataURL().

Converta a imagem para um objeto Blob usando o método fetch() e o objeto Response:

fetch(imgData)
  .then(res => res.blob())
  .then(blob => {
    // código para enviar o blob para o servidor
  });

Crie um objeto Headers e defina o cabeçalho Content-Type como multipart/form-data

let headers = new Headers();
headers.append("Content-Type", "multipart/form-data");

Envie a requisição HTTP POST para o servidor, incluindo o objeto Blob como o corpo da requisição e o objeto Headers como cabeçalhos da requisição:

fetch("https://seuservidor.com/upload", {
    method: "POST",
    body: blob,
    headers: headers
})
.then(response => {
    if(response.ok){
        console.log("Upload completo!");
    } else {
        console.log("Erro ao fazer upload: " + response.status);
    }
})
.catch(error => console.log("Erro: " + error));

É importante notar que essa abordagem pode ser diferente de acordo com a implementação do servidor, e pode ser necessário adicionar mais informações ou cabeçalhos a requisição para que o upload seja realizado corretamente.

Além disso, é importante verificar se o seu servidor está preparado para lidar com requisições multipart/form-data.

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Em conclusão, salvar uma imagem a partir de um HTML canvas é uma tarefa simples que pode ser realizada usando JavaScript.

O processo envolve obter uma referência para o canvas, usar o método toDataURL para obter a imagem em formato de URL e baixar a imagem para o dispositivo do usuário usando o método download.

Além disso, também foi mostrado como enviar a imagem para um servidor usando o objeto XMLHttpRequest ou o método fetch.

É importante notar que, navegadores diferentes podem ter suporte diferente para métodos e atributos descritos acima.

Certifique-se de testar seu código em diferentes navegadores para garantir que ele funcione corretamente.

Além disso, é importante levar em consideração questões de segurança e de negócios ao trabalhar com uploads de arquivos em produção.

Ainda assim, usando as técnicas descritas neste artigo, você pode facilmente salvar e enviar imagens de um canvas HTML para um servidor.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

E se você quiser salvar em JPG em vez de PNG?

O toDataURL aceita um segundo argumento pra qualidade, que vale só pra JPEG e WebP

É um número de 0 a 1, quanto mais perto de 1, mais qualidade (e arquivo maior)

const imgData = canvas.toDataURL("image/jpeg", 0.8);

O resto do fluxo é igual, cria o link, joga a URL no href e dispara o download

Se liga numa diferença importante: JPEG não tem fundo transparente, então se o teu canvas tem áreas vazias elas viram preto ou branco no arquivo final

Quer transparência? Fica no PNG mesmo

Por que aparece o erro de SecurityError ao salvar?

Esse é o tropeço clássico e vale te avisar antes

Se o teu canvas desenhou uma imagem que veio de OUTRO domínio, o navegador "suja" o canvas (o famoso tainted canvas) por segurança

Aí na hora que tu chama o toDataURL ele estoura um erro de SecurityError e não deixa exportar

Como resolver? Duas coisas precisam bater juntas:

No lado do JavaScript, marca a imagem como crossOrigin antes de carregar

const img = new Image(); img.crossOrigin = "anonymous"; img.src = "https://outrodominio.com/imagem.png";

E o servidor que hospeda a imagem PRECISA liberar isso no cabeçalho de CORS

Se o servidor não colaborar, não tem jeito no front, o navegador vai continuar bloqueando

Se a imagem for do teu próprio domínio, relaxa, esse erro nem aparece

Dá pra trocar o nome do arquivo baixado?

Dá sim, é só mudar o valor do atributo download do link

link.download = "o-nome-que-eu-quiser.png";

O navegador usa exatamente esse texto como nome do arquivo salvo

Precisa de biblioteca pra salvar imagem de canvas?

Não precisa de nada, tudo que você viu aqui é JavaScript puro, direto do navegador

toDataURL e o atributo download já resolvem o caso mais comum sem instalar nada