Html2canvas: Las áreas de texto no tienen saltos de línea de usuario cuando se capturan

Creado en 26 mar. 2012  ·  6Comentarios  ·  Fuente: niklasvh/html2canvas

Hola -

Si pongo texto con retornos, la captura de pantalla no contiene los retornos [solo se ve colapsado en una cadena con los retornos de carro]. Estuve sacando este código hace unos [digamos 3] meses. ¿Se ha solucionado o sigue siendo un problema?

Bug

Comentario más útil

tal vez solo podamos reemplazar textarea a div antes de usar html2canvas? y luego cambiar el div de nuevo

Todos 6 comentarios

Sigue siendo un problema, no ha habido ningún parche para colocar los textos dentro de input s o textarea s con mayor precisión. Necesitaría crear texto Range sy encontrar sus posiciones (solución más precisa) o simplemente una solución perezosa para convertir nuevas líneas en nuevas líneas reales.

El problema es evidente en https://github.com/niklasvh/html2canvas/blob/master/src/Parse.js#L717

Ok, gracias, ¿qué implicaría la solución perezosa? No he examinado en detalle la modificación de su código, así que perdóneme si esta es una pregunta estúpida. Intenté convertir los caracteres de la línea final / n / r en caracteres de avance de línea Unicode que se pueden pasar a createTextNode () pero no pareció hacer ninguna diferencia.

Probablemente necesite medir la posición de cada línea y representarlas en consecuencia.

Encontré una solución aquí: http://stackoverflow.com/questions/22317823/html2canvas-remove-multiple-spaces-and-line-break
Utiliza <div contenteditable="true"></div> para reemplazar textarea .

Pero uso angular y debo averiguar el problema ng-model .

UPD
Encontré la solución sobre el uso de ng-model en un `div 'aquí: http://mehrantm.blogspot.com/2013/10/how-make-two-way-binding-to-your.html
Espero que pueda ayudar a alguien ~

tal vez solo podamos reemplazar textarea a div antes de usar html2canvas? y luego cambiar el div de nuevo

Resolví este problema usando esta función:

        $('textarea').each(function() {
            if(!$(this).hasClass('d-none')){
                $(this).replaceWith("<div contenteditable=\"true\">"+$(this).html()+"</div>")
            }
        });

Pegue la función antes de llamar a html2canvas y su problema se resolverá :)

¿Fue útil esta página
0 / 5 - 0 calificaciones