[HTML5][JS] Salvando imagens geradas por canvas sem servidor

Crixus · 20/03/2017 às 15:11

CitarEstá é a base que estou usand para criar isto:
https://rpgmaker.000webhostapp.com/games/html5/canvas/RMXP-CharacterMaker/

[image]

Em navegadores mais antigos isso óbviamente não funcionará, se for IE anteriores ao Html5 só funcionaria com AtiveX (WScript talvez).

Navegadores testados que funcionou:

Mozilla Firefox (Desktop)
Google Chrome (Desktop)
Opera Chromium (Desktop)

Mas vamos ao que existe de mais moderno na linguagem Web para ClientSide (ou seja, que não está no servidor).
Qualquer desenho ou informação gerada dentro de um canvas gera uma imagem em BASE64.

Canvas é uma tag de HTML5 usada para desenvolver variadas aplicações, inclusive criação de jogos Web sem a necessidade do Flash, UnityWeb ou SilverLight:

<canvas></canvas>

É possivel desenhar até com plano de fundo transparente, ou seja PNG 32-Bits.

O problema em si não é como desenhar e sim como salvar o conteúdo do desenho diretamente no seu disco com um nome prédefinido ou digitado.

Para podermos capturar a informação do CANVAS basta usar o seguinte comando:

id_do_seu_canvas.toDataURL()

E ele retornará a imagem e Base64 já pronta pra ser atribuida a um link ou um SRC de uma imagem:

data:image/png;base64,iVBORw0KGgoAAA...

Mas como colocar um nome prédefinido com extensão, bem a maioria dos navegadores com suporte para HTML5 permite nomear o arquivo acessado por um link:

<a href="seu_link_ou_arquivo" download="nome_do_arquivo.extensão">LINK</a>

(Isto não funcionará no Internet Explorer 11 e anteriores)
Simples não? Mas e para atribuir outro nome dinamicamente ou o conteudo do canvas dinamicamente? Agora vamos ao JAVASCRIPT.

Para enviar o valor do canvas para o HREF este link também deve ter uma ID única, assim como o canvas:

<canvas id="meucanvas"></canvas>
<a id="arquivo" download="">FAÇA O DOWNLOAD AQUI</a>

O Javascript deverá ser assim se essas IDs forem as definidas:

function salvasImagem(a){
   /*Comentário: a variavel "a" será o nome do arquivo, use aspas para chamar a função */
   arquivo.download = a;
   arquivo.href = meucanvas.toDataURL();
}

Se não funcionar declarar as IDs como variaveis:

function salvasImagem(a){
   var meucanvas = document.getElementById('meucanvas');
   var arquivo = document.getElementById('arquivo');
   /*Comentário: a variavel "a" será o nome do arquivo, use aspas para chamar a função */
   arquivo.download = a;
   arquivo.href = meucanvas.toDataURL();
}

Então para chamar, isso pode ser feito por um botão ou link ou tempo, vai variar do seu conhecimento ou escolha:

salvasImagem('gráfico.png')

Para ter um exemplo pronto eu colocarei o código aqui e o arquivo HTML de exemplo em anexo:

<!DOCTYPE html>
<html>
<head>
	<title>Gerar e salvar imagem com CANVAS</title>
	<meta charset="UTF-8"> 
	<script>
	function iniciarExemplo(){
		var c = document.getElementById("meucanvas");
		var ctx = c.getContext("2d");

		// Criar Gradiente
		var grd = ctx.createRadialGradient(75,50,5,90,60,100);
		grd.addColorStop(0,"red");
		grd.addColorStop(1,"white");

		// Efeito
		ctx.fillStyle = grd;
		ctx.fillRect(10,10,150,80);
	}
	function salvarImagem(a){
	   var meucanvas = document.getElementById('meucanvas');
	   var arquivo = document.getElementById('arquivo');
	   /*Comentário: a variavel "a" será o nome do arquivo, use aspas para chamar a função */
	   arquivo.download = a;
	   arquivo.href = meucanvas.toDataURL();
	}
	</script>
</head>
<body onload="iniciarExemplo()">
<canvas id="meucanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Seu navegador não suporta CANVAS</canvas>
<hr>
<a id="arquivo" download="nome_do_arquivo.extensão" onclick="salvarImagem('exemplo.png')">FAÇA O DOWNLOAD AQUI</a>
</body>
</html>

Enfim, e no RpgMaker MV como se faz isso?
Até o momento não achei, pois as imagens deles são geradas por WebGL e não dentro do CANVAS realmente, então assim que eu descobrir repassarei aqui.

Eu sei que os únicos dois canvas que um jogo feito no RpgMV usa são os de IDs GameCanvas
e UpperCanvas.

O nosso amigo Hudell já descobriu e usou isso rsrs
Segue o link:
https://forums.rpgmakerweb.com/index.php?threads/orange-screenshot-saver.49560/

[HTML5][JS] Salvando imagens geradas por canvas sem servidor

Crixus

20/03/2017 às 15:11 Última edição: 13/03/2019 às 14:53 por Crixus