I'm developing an app that automatically manages images. I am able to generate the image and everything else using a library called html2canvas.
But when the image is saved the quality of the image comes out in a very bad resolution.
<script>
$("#download").click(function() {
html2canvas($("#layout"), {
onrendered: function(canvas) {
var a = document.createElement('a');
a.href = canvas.toDataURL("image/jpeg", 1.0);
a.download = 'sou-enfermagem.jpeg';
a.click();
}
});
});
</script><div id="layout" class="layout-content" style="background-color:#FAEF64; background-image:url('images/flower.png'); background-size:250px; background-position:center;">
<p id="tecnica" class="center" style="position:absolute; margin-top:75px; left:0; right:0; margin-left:auto; margin-right:auto; z-index:999; text-transform:uppercase; font-size:12px;">T É C N I C O E M E N F E R M A G E M</p>
<p id="nome" class="center" style="position:absolute; margin-top:80px; left:0; right:0; margin-left:auto; margin-right:auto; z-index:999; text-transform:uppercase;">SEU NOME</p>
<p id="slogan" class="center" style="position:absolute; margin-top:250px; left:0; right:0; margin-left:auto; margin-right:auto; color:#000; z-index:999; text-transform:uppercase;">CUIDANDO DE VOCÊ COM <br />DEDICAÇÃO</p>
<img src="images/03.png" style="position:absolute; margin-top:320px; left:0; right:0; margin-left:auto; margin-right:auto; z-index:999; width:60%;" />
</div>