1

Eu tenho um canvas e preciso colocar como background dele uma imagem que já está na tela.

Exemplo:

<div id="imagens">
    <canvas id="canvas" width="600" height="700" style="border: 1px solid black"></canvas>
</div>

Eu tenho esta fração de código que coloca uma imagem do site como backgroud document.getElementById("canvas").style.backgroundImage = "url('http://www.xxxxxx.yyy.br/1005.jpg')";

Mas eu preciso pegar a imagem que está em id="imgpreview" e coloca-la como background do CANVAS.

1 Resposta 1

1

Basta pegares no valor guardado no atributo src da imagem.
Exemplo:

var canvas = document.querySelector("#canvas");
var context = canvas.getContext("2d");
var fundo = document.querySelector("#fundo");

canvas.style.backgroundImage=`url(${fundo.src})`;
#fundo { display: none; }
<canvas id="canvas" width="480" height="320"></canvas>

<img src="https://i.ytimg.com/vi/re4_9blE4ts/hqdefault.jpg" id="fundo" />

Visto que estas a usar o canvas faria mais sentido "pintares" essa imagem diretamente no canvas. Exemplo:

document.addEventListener('DOMContentLoaded', _ =>{
  var canvas = document.querySelector("#canvas");
  var context = canvas.getContext("2d");
  var fundo = document.querySelector("#fundo");

  context.drawImage(fundo, 0,0);
}, false);
#fundo { display: none; }
<canvas id="canvas" width="480" height="320"></canvas>

<img src="https://i.ytimg.com/vi/re4_9blE4ts/hqdefault.jpg" id="fundo" />

4
  • Obrigado lazyFox sua primeira alternativa funcionou corretamente.
    – Eduardo
    17/05/2019 às 15:04
  • E a segunda não? Considere marcar esta questão como solução se não surgirem mais respostas.
    – lazyFox
    17/05/2019 às 16:14
  • Por algum motivo a 2a não deu certo....
    – Eduardo
    20/05/2019 às 18:36
  • Secalhar a sua imagem ainda não está carregada quando o código é executado, fiz um pequena alteração no código da resposta veja se faz diferença no resultado final.
    – lazyFox
    21/05/2019 às 9:05

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 .