1

Eu tenho um CANVAS no qual coloco uma imagem de fundo e em cima dessa image faço alguns desenhos. Depois preciso transformar esse CANVAS em uma imagem, usei os comandos abaixo para fazer a copia mas a imagem de fundo não é copiada. Tem alguma forma de arrumar isso ??

Grato pela ajuda.

<div id="imagens">
                <canvas id="canvas" class="ml-5 mt-2" runat="server" width="650" height="650"  style="border: 1px solid black; background-size: contain; background-repeat: no-repeat;"></canvas>
           </div>
        <img id="imagem" width="650" height="650" />

Estou usando esse script para fazer a copia

<script>var data = canvas.toDataURL();
    imagem.setAttribute('src', data);</script>

Código sugerido pelo Japôncio..

 var Img = new Image();
    Img.src = "url('http://www.digiplay.net.br/imagens/modelo2.jpg')";
    $0.getContext('2d').drawImage(Img, 0, 0, 650, 650); <== erro nesta linha
    $0.src = canvas.toDataURL('image/png', 1);
    imagem.setAttribute('src', $0);

1 Resposta 1

0

O background não conta como dado na hora de utilizar o toDataURL(), portanto, você precisa adicionar a imagem ao canvas através do DrawImage.

var Img=new Image();
Img.src='<link da sua imagem>';
document.getElementById('canvas').getContext('2d').drawImage(Img,0,0,650,650)
document.getElementById('imagem').src=canvas.toDataURL('image/png',1)

EDIT: Acho que agora está correto

2
  • 1
    Ola Japôncio... coloquei o código que você sugeriu mas está este erro (ReferenceError: $0 is not defined) veja acima como ficou meu código..
    – Eduardo
    Commented 2/07/2019 às 17:34
  • Ah sim, tem razão, erro meu, vou editar o comentário pra ficar correto Commented 3/07/2019 às 11:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .