salvar imagem png e arquivo pdf de uma div

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

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

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.

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

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.