Salvando imagem gerada no Canvas
Olá pessoal,
estou gerando uma imagem dentro de um canvas, composta de outras 3 imagens.
Ao tentar gerar uma imagem do elemento do canvas, ele me dá a mensagem de erro:
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
Pesquisando, li que o canvas não pode ficar 'sujo' com imagens externas, mas encontrei vários tópicos solucionando isso, bastando adicionar o atributo crossorigin = 'anonymous' na imagem.
Mas ainda não está dando certo. Será que estou inserindo no local errado? Podem me auxiliar nisso?
Meu código:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.crossOrigin = "Anonymous";
img = document.getElementById("modelo"+modelo);
var img2 = new Image();
img2.crossOrigin = "Anonymous";
img2 = document.getElementById("minhaFoto");
var img3 = new Image();
img3.crossOrigin = "Anonymous";
img3 = document.getElementById("amigoFoto");
ctx.drawImage(img2, 50, 250, 300, 300);
ctx.drawImage(img3, 400, 300, 300, 300);
ctx.drawImage(img, 0, 0, 800, 800);
$('#compartilhar').on('click', function() {
this.href = c.toDataURL("image/png"); // neste linha que aponta o erro
this.download = "arquivo.png";
});Discussão (0)
Carregando comentários...