3

Tenho me debatido pra resolver essa questão, que parece simples, mas não estou conseguindo,

Talvez eu não esteja sabendo fazer a pergunta, então conto com a boa vontade dos amigos:

1. Tenho o seguinte canvas:

->

var placeholder = document.querySelector('.flot-base');
var context = placeholder.getContext('2d');

Assim como outro canvas de teste

var c   = document.getElementById('analysisFullGraph1');
var ctx = c.getContext('2d');

Com essa funcao consigo copiar facimente uma parte do canvas "placehoder" para o canvas "ctx"

function copy{
    var imgData = context.getImageData(684, 0, 784, 250);
    ctx.putImageData(imgData, 100, 0);
}

=>

  1. porem estou tentando copiar do canvas para uma outra imagem, mas nao tive sucesso...

por exemplo:

<html>
    <img id='analysisFullGraph1'  src="full_graphics.png" />
</html>

<script>
var placeholder = document.querySelector('.flot-base');
var context = placeholder.getContext('2d');

var imageCTX  = document.getElementById('analysisFullGraph1');

function copy{
    var imgData = context.getImageData(684, 0, 784, 250);
    imageCTX.putImageData(imgData, 100, 0);
}
</script>

Como fazer essa copia?

0

2 Respostas 2

5

Não confunda um objeto de imagem com um contexto 2d do canvas. O único que pode ser alterado em uma imagem do HTML é a sua fonte (Image().src).

Continuando, será mais simples para fazer o que você quer:

Você não precisa de ImageData() para fazer isso, você pode renderizar um pedaço do outro canvas usando diretamente ctx.drawImage(Image, sx, sy, sw, sh, dx, dy, dw, dh), onde o ponto s indica o ponto de renderização do quadro da imagem, e cada parâmetro começando com "d" indica os destinos de onde desenhar a imagem. Quando pelo menos somente 5 parâmetros abaixo são especificados, eles se tornam nessa sequência: Image, dx, dy, dw, dh.

var canvas2 = document.createElement('canvas'),
    context2 = canvas2.getContext('2d')

canvas2.width = imageCTX.width
canvas2.height = imageCTX.height

context2.drawImage(imageCTX, 0, 0)

context2.drawImage(c,
            /* parâmetros de corte */
            684, 0, 784, 250,
            /* destinos de desenho (x, y, largura, altura) */
            10, 0, c.width, c.height)

imageCTX.src = canvas2.toDataURL()

Só para lembrar, ctx.putImageData renderiza um ImageData em uma forma que atravessa o ImageData atual do canvas, sem perceber a transparência dos pixels.

Se você realmente quer usar ctx.putImageData você pode criar 2 canvas anônimos, assim o canvas2 será desenhado com a ImageData do canvas c, e o canvas3 será desenhado com a imagem desejada, em seguida desenhado com canvas2 usando ctx.drawImage (pois canvas é tratado como uma imagem), e finalmente > imageCTX.src = canvas3.toDataURL().

inserir a descrição da imagem aqui

1
3

Uma possibilidade para efetuar a cópia dos dados do canvas para a imagem (DOM), é utilizar o método toDataURL(), do elemento canvas (não do contexto!).

Este método, retorna a representação da imagem em um formato URI (padrão PNG, mas pode ser alterado por parâmetro), por exemplo: "data:image/png;base64,iVBORw0KGgoA...".

O código para cópia fica:

var dados = placeholder.toDataURL();
imageCTX.setAttribute('src', dados);

Veja funcionando no jsfiddle: Cópia - Canvas Para Img

4
  • 1
    Mas o op quer copiar um pedaço só
    – user37626
    5/09/2016 às 13:48
  • 1
    O título da pergunta é "Como copiar um canvas para imagem", não uma parte dele. Existem outras formas de fazer essa cópia, mas se a resposta do @nicematt (mais completa) lhe ajudou, aceite-a como resposta correta :)
    – Gomiero
    5/09/2016 às 23:53
  • talvez fosse interessante saber que, nos que fazermos a pergunta.... nao sabemos exatamente o que queremos... por isso estamos tentando aprender e no processo perguntando errado... nao sei mais como expressar essa questao.. ja tentei de varias formas... por favor desculpem o mau jeito... mas eh frustrante... 6/09/2016 às 0:12
  • 1
    @RobervalSena山本 mas é perguntando que nós aprendemos! Não se sinta frustrado por isso! Acredito que todos aqui já passaram por isso e ainda passam, pois novas tecnologias surgem todos os dias. IMO, perguntar é bem mais difícil que responder :)
    – Gomiero
    6/09/2016 às 0:39

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 .