salvar imagem png e arquivo pdf de uma div

1. salvar imagem png e arquivo pdf de uma div

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


  


2. Re: salvar imagem png e arquivo pdf de uma div

Marcos Felipe
plimo263

(usa Ubuntu)

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

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


3. Re: salvar imagem png e arquivo pdf de uma div

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


4. Re: salvar imagem png e arquivo pdf de uma div

shoujo
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


5. Re: salvar imagem png e arquivo pdf de uma div

Marcos Felipe
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.


6. Re: salvar imagem png e arquivo pdf de uma div

shoujo
shoujo

(usa Slackware)

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

plimo263 escreveu:

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.


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






Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts