0

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 &#128147 &#128079 &#128556</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;
    }

1

2 respuestas 2

0

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() {
        const preview = document.getElementById("divPreview");
        preview.classList.toggle("dimensiones");
    html2canvas(preview, {
    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();
     preview.classList.toggle("dimensiones");
    },
    useCORS: true
    });
   
    }
     .preview {
      object-fit: contain;
      background-size: 100% 100%;
      
    }


    .image-preview {
      width: 100%;
      height: 100%;
      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;
    }

    .dimensiones{
        width: 1920px;
        height: 1080px;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.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 &#128147 &#128079 &#128556</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>

6
  • perdona no habia puesto el css completo en la pregunta, asi se veía podrias decirme si el error es en el css
    – yhonniel
    Commented el 4 sept. 2022 a las 2:13
  • Edite la respuesta para poner la imagen que me genera a mí con los cambios que yo hice, está bien esa imagen?
    – Yussef
    Commented el 4 sept. 2022 a las 2:22
  • si ya acabo de editar, y si esa es la imagen 1920x1080 pero aún así colocandole al div .preview el width: fit-content; se ve igual pixeleada
    – yhonniel
    Commented el 4 sept. 2022 a las 2:28
  • lo que creo que está pasando que está considerando el tamaño actual dentro del div y cuando se descarga se estira no respetando el tamaño original
    – yhonniel
    Commented el 4 sept. 2022 a las 2:32
  • Si ahora que está el css completo, veo que lo de fit-content no es necesario
    – Yussef
    Commented el 4 sept. 2022 a las 2:45
0

Te comparto la solución en general para optener imagenes de calidad con las librerias que utilizas. El codigo está comentado.

    /*Importar Librerias Necesarias*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.12/jspdf.plugin.autotable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>

/*Codigo para Exportar*/

//codigo descargar pdf
/*En este caso el div que contiene lo que quiero exportar se llama 'cupones'*/
/*Captamos el click del boton*/
document.getElementById("descargarPDF").addEventListener("click", function() {
/*Obtenemos el div a exportar*/
const element = document.getElementById('cupones');

html2canvas(element, { scale: 2 }).then(canvas => { // Escala el canvas para una mejor resolución
    // Dimensiones de una hoja A4 en puntos (1 pulgada = 72 puntos)
    const pdfWidth = 595.28; // Ancho
    const pdfHeight = 841.89; // Alto

    // Dimensiones del contenido capturado en el canvas
    const contentWidth = canvas.width;
    const contentHeight = canvas.height;

    // Define el factor de escala para aumentar el tamaño del contenido
    let scaleFactor = 0.3; //  cambio de tamaño

    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        // Si es móvil, ajusta la escala y la calidad de la imagen
        scaleFactor = 0.2; // Reducción del 20% del tamaño original (por ejemplo)
    }

    // Calcula las dimensiones escaladas con la relación de aspecto original
    const scaledWidth = contentWidth * scaleFactor;
    const scaledHeight = contentHeight * scaleFactor;

    // Calcula el espacio en blanco necesario para centrar el contenido en la hoja A4
    const offsetX = (pdfWidth - scaledWidth) / 2;
    const offsetY = 20; // Ajusta la distancia desde la parte superior de la página (en este caso, 20 puntos)

    // Crea el documento PDF y agrega el canvas escalado
    const pdf = new jsPDF('p', 'pt', 'a4');

    // Convierte el canvas a una imagen con calidad JPEG
    const imgData = canvas.toDataURL('image/jpeg', 1.0); // Ajusta la calidad según sea necesario

    pdf.addImage(imgData, 'JPEG', offsetX, offsetY, scaledWidth, scaledHeight);

    // Guarda el PDF
    pdf.save('cupones.pdf');
});

});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.