Un saludo a toda la comunidad de stack overflow, tengo una duda a ver si es posible, sobre como descargar automáticamente la imagen (obtenida de la librería html2canvas con javascript) estoy presetando el siguiente problema:
El problema está cuando descargo la imagen se ve pixeleada y borrosa.
Al principio pense que era la imagen pero la imagen está al mismo tamaño que la estoy descargando por eso me parece raro.
Estaré muy agradecido por el apoyo, solo espero que me apuedan ayudar, muchas gracias.
function save(canvas) {/*html2canvas-0.5.0 work with Promise.js*/
let a = document.createElement("a");
a.download = "ss.png";
a.href = canvas.toDataURL("image/png");
a.click();
}
function capturePng() {
console.log("hola capture png")
html2canvas(document.getElementById("divPreview"), {
onrendered: function(canvas) {
var _canvas = document.createElement("canvas");
_canvas.setAttribute('width', 1920);
_canvas.setAttribute('height', 1080);
var ctx = _canvas.getContext('2d');
//context.scale(5, 5);
ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, 1920, 1080);
var dataURL = _canvas.toDataURL();
//document.getElementById("canvasWrapper").appendChild(_canvas);
var image = _canvas.toDataURL("image/png");
let a = document.createElement("a");
a.download = "ss.png";
a.href = image;
a.click();
},
useCORS: true
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<div id="divBorder" class="divBorder">
<div id="divPreview" class="container-center preview overText">
<div id="textDiploma" class="tag">Aquí se mostrará tu mensaje 💓 👏 😬</div>
<img id="imageDemo" src="https://i.imgur.com/4RSk1bq.png" class="image-preview" crossorigin="anonymous"/>
</div>
</div>
<button class="button" id="btnCaptura" onclick="capturePng()">Descargar Diploma
</button>
.preview {
object-fit: contain;
background-size: 100% 100%;
}
.image-preview {
width: 100%;
height: 80%;
object-fit: contain;
background-size: 100% 100%;
}
.container-center {
text-align: center;
}
.overText {
position: relative;
}
.tag {
position: absolute;
bottom: 24%;
width: 100%;
}
.divBorder {
border: 10px solid #1796A7;
margin: 0px 70px;
}