Html2canvas: Espaciado anormal entre letras en Chrome / Chromium

El espaciado entre letras (espaciado entre palabras en este caso) parece correcto en realidad, lo que no parece ser correcto es la familia de fuentes. ¿Qué versión de html2canvas estás usando? ¿Puedes replicar el problema en jsfiddle?

Editar: con letterRendering debería renderizarse de manera diferente como mencionaste.

Gracias por su respuesta,

Estoy usando la versión 0.5.0-beta4 .

¿Qué quiere decir con que el espacio de trabajo parece correcto? ¿Te refieres a la primera imagen que he compartido? ¿La fuente crearía tal espacio entre palabras?

Tenga en cuenta que estoy usando CodeMirror para el editor de texto que se representa, específicamente un contenedor Angular: ng2-codemirror .

Intenté reproducir el problema sin éxito aquí .

También encontré el mismo problema en Firefox y Chrome. Si tiene una regla CSS de espaciado entre letras en el texto, lo representará con grandes espacios entre cada palabra. Este no era el caso en la versión 0.4.1 que solía representar el texto perfectamente, pero le faltaban pseudo elementos (: before: after)

Una vez que eliminas la regla letter-spacing , ¿todo vuelve a la normalidad para ti? No lo estoy usando, ni en el css de mi componente ni en el archivo css de mi code-mirror .

Sí Después de eliminar la regla de espacio entre letras del CSS, el problema desapareció. no hay grandes espacios entre palabras. es algo en la representación de la página en la parte del espacio entre letras que lo está estropeando.

¡Actualizar! Acabo de construir la biblioteca a partir de las últimas fuentes en master y funciona perfectamente. todo se ve muy bien hasta ahora. Anteriormente probé con la versión v0.5.0-beta4.

Editar: Se encontró 1 problema en Firefox. las imágenes de fondo no se recortan al texto cuando
-webkit-background-clip: texto;
-webkit-text-fill-color: transparente;
son usados.
Sin embargo, funciona muy bien en cromo.

No uso ninguna propiedad letter-spacing en mi CSS y el problema sigue presente. Aunque estoy usando v0.5.0-beta4 .

Intente construir a partir de las últimas fuentes maestras.

Hecho, y sin embargo esto no resuelve el problema, la pantalla sigue siendo la misma.

Debe arreglarse con https://github.com/niklasvh/html2canvas/commit/77d258f1d8eeccf7e38235463a293b512c1ca3d0

Parece que el problema persiste así:

Así es como rendericé el elemento:

html2canvas(document.body).then(function(canvas) {      
      document.body.appendChild(canvas);
});    

He descargado la última versión preliminar que mencionaste y reemplacé la anterior.

@christopherkade, ¿lo soluciona si configura la opción letterRendering: true ?

Lamentablemente no es así, así es como lo hago:

let element = document.getElementById('console');
const options = {
  letterRendering: true
};

html2canvas(element, options).then(function(canvas) {      
  document.body.appendChild(canvas);

  var url = canvas.toDataURL();
  var img = '<img src="' + url + '" style="border:0;"></img>'
  var x = window.open();
  x.document.open();
  x.document.write(img);
  x.document.close();
});

Mismo resultado si pruebo el ejemplo dado en el repositorio.

He encontrado una solución al problema (y no está muy limpia):

// Package used to detect the browser used by the user
const browser = detect();
const element = document.getElementById('console');

// Set up my options
let options = {};
// For some reason foreignObjectRendering solves the spacing issue on Chrome but gives an error on Firefox, so I detect the browser and apply the adequate options.
if (browser && browser.name === 'chrome') {      
  options = {
    useCORS: true,
    foreignObjectRendering: true
  };  
}

// Open the canvas in a new window
html2canvas(element, options).then(function(canvas) {
  const url = canvas.toDataURL();
  const img = '<img src="' + url + '" style="border:0;"></img>'
  const x = window.open();
  x.document.open();
  x.document.write(img);
  x.document.close();
});

Tenga en cuenta que el error que obtengo en Firefox cuando uso la segunda opción es el siguiente:

No detectado (en promesa): [Excepción ... \ "Método no implementado \" ...

¡¡El mismo problema!!

Resuelto aquí eliminando el atributo CSS font-variant-numeric: proporcional-nums del cuerpo HTML.

Se solucionó un problema similar con la eliminación de font-variant: tabular-nums; ( in antd.css )

mismo problema con el idioma árabe alguna sugerencia por favor?

@mohafouad +1

¿Has encontrado alguna solución para esto? Gracias.

@ 2xSamurai no: (

He solucionado esto también yendo al div que quiero hacer una captura de pantalla y luego configuré el " font-variant: normal; ", esto me ha funcionado, espero que ayude.

fijo si agrego font-variant: normal !important al div externo de todo el contenido (en el proyecto antd)

mismo problema, me volvio loco

font-variant: normal! important not working

La respuesta de @ Malarkey-Jhu y @maaoui resolvió mi problema.

El problema que tuve: la familia de fuentes no funcionaba y el espaciado era muy irregular. A veces tenía letras superpuestas.

Lo que hago: durante la exportación llamo element.style.setProperty ('font-variant', 'normal') en el elemento con el texto, y esto permite que la familia de fuentes se muestre correctamente y que el espaciado no sea del todo irregular . Luego elimino esa propiedad después de haber terminado de exportar.

Según las soluciones anteriores, este problema se solucionó cambiando -webkit-font-variant-ligatures y font-variant-ligatures a normal en el archivo css de codemirror. Estoy usando la versión de CodeMirror 5.42.2 .