How to copy a canvas to an image

Asked

Viewed 1,014 times

3

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

Maybe I am not knowing how to ask the question, then I count on the goodwill of friends:

1. I have the following canvas:

->

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

Just like other 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 the canvas "ctx"

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

=>

  1. however I am trying to copy from the canvas to another image, but did not succeed...

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

2 answers

5


Do not confuse an image object with a 2d context of the canvas. 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 don’t need ImageData() to do this, you can render a piece of the other canvas using directly ctx.drawImage(Image, sx, sy, sw, sh, dx, dy, dw, dh), where point s indicates the render point of the image frame, and each parameter starting with "d" indicates the destinations from which to draw the image. When at least 5 parameters below are specified, they become that 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 remind, ctx.putImageData render a ImageData in a form that crosses the ImageData current canvas, without realizing the transparency of pixels.

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

inserir a descrição da imagem aqui

3

A possibility to copy data from canvas for the image (DOM), is to use the method toDataURL(), canvas element (not context!).

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

The code to copy:

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

See working on jsfiddle: Copy - Canvas For Img

  • 1

    But the op wants to copy a single piece

  • 1

    The title of the question is "How to copy a canvas to an image", not a part of it. There are other ways to make this copy, but if the @nicematt response (more complete) helped you, accept it as the correct answer :)

  • It might be interesting to know that if we ask the question.... we don’t know exactly what we want... so we’re trying to learn and in the process asking wrong... I don’t know how to express this question anymore.. I have tried several ways... please excuse the bad way... but it is frustrating...

  • 1

    @Robervalsena 山 本 but it’s asking that we learn! Don’t feel frustrated by it! I believe that everyone here has been there and they still are, because new technologies arise every day. IMO, Asking is much harder than answering :)

Browser other questions tagged javascript html5 canvas

You are not signed in. Login or sign up in order to post.