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
HTML y PNG con escala
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.