salvar imagem png e arquivo pdf de uma div

shoujo
(usa Slackware)

Enviado em 06/12/2017 - 09:45h

Olá, preciso transformar uma div em uma imagem png e também em pdf, já testei vários codigos, jquery, javascript e nada, todos dão algum problema, no css, os elementos não saem corretamente na imagem salva.
Alguém sabe de algum modo de fazer isso?
As divs pertencem a algumas classes, mas também tem codigo direto no style da div..

plimo263
(usa Ubuntu)

Enviado em 06/12/2017 - 09:56h

Bom dia, se vai querer pode imprimir estas divs usando media querys de css.

shoujo
(usa Slackware)

Enviado em 06/12/2017 - 10:47h

nao quero imprimir, quero salvar arquivo de imagem, jpeg, png..
E também arquivo pdf, é pra guardar no pc..

Meu aplicativo é um editor de imagens feito em html/css/javascript

Estou fazendo ele do zero.

shoujo
(usa Slackware)

Enviado em 06/12/2017 - 10:58h

Vou deixar alguns codigos pra ajudar
HTML:

<article class="resize-container" id="resize-container" onclick="normalizaEdit()"><div id="obj0" contenteditable="false" style="background: rgba(0, 0, 0, 0.5);  left:0px; top:0px" onclick="move_posicao(this)" ondblclick="" class="resize-drag objeto_tela" tipo="retangulo">a</div><div id="obj1" contenteditable="true" style="background: rgba(250, 0, 0, 0.5); color: black;" onclick="move_posicao(this)" ondblclick="editar(this)" class="resize-drag objeto_tela" tipo="retangulo">a</div><div id="obj2" contenteditable="true" style="background-color: yellow; color: black;" onclick="move_posicao(this)" ondblclick="editar(this)" class="resize-drag objeto_tela" tipo="retangulo">a</div><div id="obj3" contenteditable="false" style="width: 250px; height: 286px; transform: translate(27px, 28px);" onclick="move_posicao(this)" ondblclick="" class="resize-drag resize-container objeto_tela" tipo="retangulo" data-x="27" data-y="28"><div class="circulo" style="border: 1px solid black; width: 250px; height: 286px; border-radius: 50%;"></div></div><div id="obj4" contenteditable="true" style="background-color: pink; color: black; width: 306.109px; height: 135px; transform: translate(237px, 30px);" onclick="move_posicao(this)" ondblclick="editar(this)" class="resize-drag objeto_tela" tipo="retangulo" data-x="237" data-y="30">a</div><div id="obj5" contenteditable="true" style="background-color: red; color: black; width: 500px; height: 500px; border-radius: 80%; transform: translate(185px, 159px);" onclick="move_posicao(this)" ondblclick="" class="resize-drag circulo objeto_tela" tipo="circulo" data-x="185" data-y="159"></div></article>

<button id="renderPDF" onclick="downloadPDF()">Download PDF</button><button id="renderPng" onclick="downloadPng()">Download Png</button>

 

css

*{

  margin: 0 0 0 0;

}

.objeto_tela{

  position:absolute;

}

.resize-drag {



position:absolute;



/* This makes things *much* easier */

box-sizing: border-box;

}



.resize-container {

width: 100%;

height: 100%;

border: 1px solid black;

}



.circulo {

border-radius: 50%;

}



 

javascript

function downloadPDF()

{

    var pdf;

  pdf = new jsPDF('landscape');

  pdf.addHTML(document.getElementById("resize-container"), function() {

    pdf.save('stacking-plan.pdf');

  });

}

function downloadPng()

{

   html2canvas(document.getElementById("resize-container"), {

        onrendered: function(canvas) {

		Canvas2Image.saveAsJPEG(canvas,document.getElementById("resize-container").offsetWidth, document.getElementById("resize-container").offsetHeight);

        }

    });

}

 

Nenhum funciona corretamente

plimo263
(usa Ubuntu)

Enviado em 06/12/2017 - 11:06h

Se tu coloca com media querys para imprimir vai conseguir mandar o fluxo para uma impressora PDF. Mas tu pode ver isto do lado do servidor também já que seu caso é desejavel salvar PDF e não "imprimir" em PDF.

shoujo
(usa Slackware)

Enviado em 06/12/2017 - 15:07h

Mas os outros editores de imagem fazem isso, e tudo do lado cliente. Mas eu to usando um caminho diferente pra criar meu aplicativo.