estoy trabajando con react y openlayers, un framework para mapas de diferentes tipos (vectoriales, wms, etc). El problema que tengo es que con mi código al capturar el canvas y pasarlo a pdf (mediante la librería jsPDF) la imagen que se muestra en el pdf se muestra deformada, estirada... es decir que no se mantienen las mismas dimensiones y proporciones.
Por ejemplo, he puesto un par de logs para capturar el ancho y el alto del canvas antes de generar el pdf y tengo estos resultados: width: 3076px y height: 1672px y tengo seleccionado un A4 cuyas dimensiones de 21.0 cm y 29.7 cm.
He estado mirando ejemplos de como hacer un resize del elemento canvas para que no se deforme pero no lo consigo. ¿Cómo puedo escalar la imagen sin que se desproporcione? Qué tengo que tener en cuenta: ¿una cosa son pixels y lo otro milemetros? ¿ la densidad de pixel de la pantalla ?
Les dejo mi código, les agradecería que me ayudaran a resolver mi problema porque me está volviendo loco.
downloadImage = () => {
var dims = {
a0: [1189, 841],
a1: [841, 594],
a2: [594, 420],
a3: [420, 297],
a4: [297, 210],
a5: [210, 148]
};
var format = this.state.format;
var dim = dims[format];
var canvas = document.getElementsByTagName("canvas")[0];
var imgData = canvas.toDataURL("image/jpeg", 1.0);
var pdf;
if (this.state.orientation === 'portrait') {
pdf = new jsPDF('portrait', undefined, format);
pdf.addImage(imgData, 'JPEG', 0, 0, dim[1], dim[0]);
} else {
pdf = new jsPDF('landscape', undefined, format);
pdf.addImage(imgData, 'JPEG', 0, 0, dim[0], dim[1]);
}
pdf.save(`map-${format}-${this.state.orientation}.pdf`);
}
CSS
-----
.map {
position: absolute;
width: 100%;
height: 100%;
}