Print Content that Has Multiple Canvas

Asked

Viewed 235 times

1

I’m making a site where you have a picture to color a drawing.

After much research I managed to make a scheme to paint a certain area of the drawing of canvas.

Now I want to do a function that prints the drawing I made.

I’m trying to do it like this:

<div id="painter">
<canvas style="z-index: 1;"></canvas>
<canvas style="z-index: 2;"></canvas>
<canvas style="z-index: 3;"></canvas>
<canvas style="z-index: 4;"></canvas>
</div>

My painting has all these canvas.

When I make a scratch on the board it creates another canvas and so on.

I want to print the drawing, but this way is not going. When you open the screen to print appears 5 empty sheets.

The canvas doesn’t come out in print ?

javascript html canvas
  • 1

    I did it. It wasn’t that hard. I did a little research on Soen.

  • good that solved! Post as answer to your solution to help other people who may have the same problem ;)

  • 1

    I’ll post it. I was hoping to take a break.

1 answer

1


I found the answer in Soen.

    $("#printImagem").on('click', function(e){
        e.preventDefault();

        var Can = new Array();
        $('canvas').each(function(index, el){
            Can[index] = $(el)[0].toDataURL('image/png');
        });

        var windowContent = '<!DOCTYPE html>';
        windowContent += '<head><title>Imprimir Desenho</title></head>';
        windowContent += '<body>';

        for(var x = 0; x <= Can.length - 1; x++)
            windowContent += '<img src = "' + Can[x] + '" style="position: absolute; left: 0; top: 0;">';

        windowContent += '</body>';
        windowContent += '</html>';
        var printWin = window.open('', '', width = 340, height = 260);
        printWin.document.open();
        printWin.document.write(windowContent);
        printWin.document.close();
        printWin.focus();
        printWin.print();
    });

The only thing that served me was the toDataURL. I didn’t know I had to do this to turn the canvas an image. In fact it is converted into base64 and png, as defined in the function parameter toDataURL('image/png').

But there may be more than one canvas in the drawing area.

So I made a each searching each canvas and converting it into base64 and putting him in the same position with absolute, top and left worthwhile 0.

For that I used a array. I don’t know if there are better ways to do it. If there is, please post the logic. I mean the array and to the each.

Browser other questions tagged javascript html canvas

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