How to copy a canvas to an image

Question

How to copy a canvas to an image

Navigation

#1 by (5 votes)
#2 by (3 votes)

3

I've been struggling to resolve this issue, which seems simple, but I'm not getting it,

Maybe I'm not knowing how to ask the question , so I count on goodwill from friends:

1. I have the following canvas:

->

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

Just like another test canvas

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

With this function I can easily copy a part of the canvas "placehoder" to canvas "ctx"

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

= >

But I'm trying to copy from canvas to another image, but I was not successful ...

For example:

<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>

How to make this copy?

javascript html5 canvas

asked by anonymous 05.09.2016 / 10:39

2 answers

3

One possibility to copy the canvas data to the image (DOM) is to use the toDataURL () of the canvas element (not the context!).

This method returns the image representation in a URI format (PNG default, but can be changed per parameter), for example: "data:image/png;base64,iVBORw0KGgoA..." .

Copy code stays:

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

See working in jsfiddle : Copy - Canvas For Img

05.09.2016 / 14:00

Doubt regarding switch case if Get keys from an array

score 5 · Accepted Answer

Do not confuse an image object with a 2d canvas context. The only one that can be changed in an HTML image is its source ( Image().src ).

Continuing, it will be simpler to do what you want:

You do not need ImageData() to do this, you can render a piece of the other canvas directly using ctx.drawImage(Image, sx, sy, sw, sh, dx, dy, dw, dh) , where point s indicates the rendering point of the image frame, and each parameter starting with "d" indicates the destinations from which to draw the image. When at least only 5 parameters below are specified, they become in this sequence: 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()

Just to remember, ctx.putImageData renders a ImageData in a form that traverses the ImageData of the current canvas, without realizing the transparency of the pixels.

If you really want to use ctx.putImageData you can create 2 anonymous canvas, so canvas2 will be drawn with ImageData canvas c , and canvas3 will be drawn with the desired image, then drawn with canvas2 using ctx.drawImage (because canvas is treated as an image), and finally > imageCTX.src = canvas3.toDataURL() .