Como transformar canvas em imagem?

[Insanity 9]

Eu queria transformar um canvas em imagem, podendo ser png ou jpg, não importa.

 

Por exemplo, eu tenho o seguinte codigo:

[...]

//com umas coisas mais acima

tela.style.display = "block";
var c = tela.getContext("2d");
c.drawImage(img, 0, 0);


c.textAlign = "center";
c.font =  fonte + "px Georgia";
c.fillStyle = "white";
c.fillText(userName, base/2, ((+altura) - (altura/11)));


}


//fim

Bom, fiz meu canvas, mas quero que exiba como imagem e a pessoa possa salva-lo com imagem.

Só isso!

Agradeço desde já!

[Snowden 94]

suponho que a variável tela seja seu canvas, ficaria assim:

<!-- add a tag img que exibira a imagem do canvas -->
<img id="imageCanvas" alt="meu canvas">

<!-- add a tag link para salvar a imagem -->
<a href="#" id="salvar">SALVAR</a>

// obtém o source da imagem
var imgData = tela.toDataURL(); // por padrão, a imagem é PNG

// exibe imagem
document.getElementById('imageCanvas').src = imgData;

// salva imagem
document.getElementById('salvar').addEventListener('click', function(e){
    this.href = imgData; // source
    this.download = 'canvas.png'; // nome da imagem
    return false;
});

[Insanity 9]

Amigo, deu muito certo mesmo, muito obrigado!

 

Mas tem um problema, na hora de salvar, essa funcão está dando o seguinte erro no console: Uncaught TypeError: Cannot read property 'addEventListener' of null.

 

Citando a primeira linha da função: document.getElementById('salvar').addEventListener('click', function(e){;

 

Se puder me ajudar ainda com essa questão.

 

Opa, tem outra kkkkk. Eu queria saber como carregar uma imagem, por exemplo, a pessoa upa uma imagem do seu PC ou cola um link da imagem, ele dá um erro no drwImage.

 

 

Só isso, e o meu caso está resolvido kkkkk! Sou iniciante!

Obrigado!

[Snowden 94]

tente assim..

window.onload = function(){
  // restante do seu código
  ...

  // obtém o source da imagem
  var imgData = tela.toDataURL(); // por padrão, a imagem é PNG

  // exibe imagem
  document.getElementById('imageCanvas').src = imgData;

  // salva imagem
  document.getElementById('salvar').addEventListener('click', function(e){
    this.href = imgData; // source
    this.download = 'canvas.png'; // nome da imagem
  }, false);
};

quanto a questão do upload dê uma olhada nessa solução stackoverflow

[Insanity 9]

Muito Obrigado, marcado com a Resolvido!

 

Eu só não consegui entender direito a questão de carregar a imagem... Mas vou abrir outro tópico, se não foge muito...

 

 

Obrigado mesmo!