Saltar al contenido

HTML2canvas genera imágenes borrosas

Hacemos una verificación exhaustiva cada escrito de nuestra web con la meta de enseñarte siempre la información con la mayor veracidad y actualizada.

Solución:

puedes usar escala opciones en html2canvas.

En la última versión, v1.0.0-alpha.1, puede usar la opción de escala para aumentar la resolución (escala: 2 duplicará la resolución de los 96 ppp predeterminados).

// Create a canvas with double-resolution.
html2canvas(element, 
    scale: 2,
    onrendered: myRenderFunction
);
// Create a canvas with 144 dpi (1.5x resolution).
html2canvas(element, 
    dpi: 144,
    onrendered: myRenderFunction
);

Tuve este problema porque estaba en una pantalla retina. Lo resolví usando la solución de MisterLamb aquí.

$(window).load(function () 

    var scaleBy = 5;
    var w = 1000;
    var h = 1000;
    var div = document.querySelector('#screen');
    var canvas = document.createElement('canvas');
    canvas.width = w * scaleBy;
    canvas.height = h * scaleBy;
    canvas.style.width = w + 'px';
    canvas.style.height = h + 'px';
    var context = canvas.getContext('2d');
    context.scale(scaleBy, scaleBy);

    html2canvas(div, 
        canvas:canvas,
        onrendered: function (canvas) 
            theCanvas = canvas;
            document.body.appendChild(canvas);

            Canvas2Image.saveAsPNG(canvas);
            $(body).append(canvas);
        
    );
);

HTML y PNG sin escalar

ingrese la descripción de la imagen aquí

HTML y PNG con escala

ingrese la descripción de la imagen aquí

He descubierto mi problema. Sucede que mi pantalla es una pantalla Retina, por lo que cuando canvas2html representa el HTML, debido a la diferencia de densidad de píxeles en la pantalla retina, la imagen se visualiza borrosa.

Encontré la solución aquí:

https://github.com/cburgmer/rasterizeHTML.js/blob/master/examples/retina.html

Nos encantaría que puedieras comunicar este ensayo si lograste el éxito.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *