1

Estou fazendo um site no qual se tem um quadro para colorir um desenho.

Depois de muita pesquisa consegui fazer um esquema de pintar uma determinada área do desenho do canvas.

Agora eu quero fazer uma função que imprima o desenho que eu fiz.

Estou tentando fazer assim:

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

Meu quadro tem todos estes canvas.

Quando eu faço um risco no quadro ele cria outro canvas e assim sucessivamente.

Quero imprimir o desenho, mas dessa forma não está indo. Quando abre a tela para imprimir aparece 5 folhas vazias.

O canvas não sai na impressão ?

3
  • 1
    Consegui. Não foi tão difícil. Pesquisei um pouco no SOen. Commented 28/10/2015 às 16:09
  • que bom que resolveu! Poste como resposta a sua solução para que ajude outras pessoas que possam ter o mesmo problema ;)
    – Brunno
    Commented 28/10/2015 às 18:29
  • 1
    Vou postar. Estava esperando dar um tempo. Commented 28/10/2015 às 18:38

1 Resposta 1

1

Encontrei a resposta no 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();
    });

A única coisa que me serviu foi o toDataURL. Não sabia que tinha que fazer isso para transformar o canvas numa imagem. Na verdade ela é convertida em base64 e png, conforme defini no parâmetro da função toDataURL('image/png').

Mas pode ser que tenha mais de um canvas na área de desenho.

Então eu fiz um each pesquisando cada canvas e o convertendo em base64 e o colocando na mesma posição com absolute, top e left com valor 0.

Para isso usei um array. Não sei se existe maneiras melhor de fazer. Se existir, por favor postem a lógica. Me refiro ao array e ao each.

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 .