javascript - dentro - text en svg

El atributo de texto SVG se está duplicando-HTML2CANVAS

Question

Aquí está mycode y enlace a JSFiddle .

HTML

<input type="button" id="export" value="Export"/>
    <svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

<text x="162" text-anchor="middle" class="highcharts-title" zindex="4" style="color:#333333;font-size:18px;font-weight:normal;text-decoration:normal;font-family:Lucida Grande,Lucida Sans Unicode, Arial, Helvetica, sans-serif;visibility:visible;fill:#333333;width:260px;" y="25">Inventory</text>
</svg>

JS

$(document).ready(function(){
        $(''#export'').on(''click'', function() {       
            html2canvas(document.body, {
                onrendered: function(canvas) {
                    document.body.appendChild(canvas);
                },
            });
        });
});

Intento convertir una svg en imagen de lienzo utilizando la biblioteca html2canvas. En el ejemplo, simplemente anexo la imagen del lienzo a la salida. Puedes ver claramente que el texto se multiplica. ¿Alguien podría aconsejarme para resolver este problema?

Espero que mi pregunta sea clara. Gracias por adelantado.

Answer 1

Lo que he encontrado es básicamente que la fuente Unicode (Lucida Sans Unicode) no funciona correctamente con HTML2Canvas en Chrome, y otra cosa es el tamaño de fuente admitido para esto son pequeños, más pequeños, grandes, más grandes, etc ... aunque esta información no lo hace resuelva su problema actual, pero si es posible que reemplace estas cosas, entonces podrá evitar este problema

Answer 2

El problema es que HTML2Canvas no es compatible con los archivos svg (más explicación aquí https://github.com/niklasvh/html2canvas/issues/95 ).

Una alternativa que puede hacer si aún necesita HTML2Canvas es convertir primero el SVG a Canvas (esto lo hace canvg.js) y luego usar HTML2Canvas sobre eso, y luego revertirlo. Un ejemplo del código que hace esto se puede encontrar en el enlace de arriba.

Answer 3

No encontré una manera limpia de solucionarlo. Así que se me ocurrió lo siguiente, será necesario retocar para representar su aplicación, pero funciona como un encanto.

// Replace each SVG text with normal text
$(''text'').each(function(){

    // Get the offset
    var offset = $(this).offset();

    // Create new text
    $(this).parents(''[data-role="canvas"]'').append(''<p class="app-svg-text-replace" style="top: '' + offset.top + ''px; left: '' + parseInt(offset.left - parseInt((($(window).width() / 2) - 512))) + ''px;">'' + $(this)[0].textContent + ''</p>'');

    // Remove the SVG text
    $(this)[0].textContent = '''';

})

Básicamente simplemente reemplaza cualquier elemento TEXTO con un elemento P y el contexto de los textos svg, y lo posiciona en base a los desplazamientos TEXT. Simplemente crea los elementos P antes de la etiqueta corporal y hazlos absolutos. (Los estoy poniendo en un divs dentro de un contenedor por eso hay -512 etc., puedes ignorar eso)

Antes de:

Después:

Answer 4

Dependiendo de la orientación, es posible que ya no necesite HTML2Canvas para pintar SVG en un lienzo.

Al menos Chrome es posible dibujar ese SVG particular directamente en un lienzo ahora. Usando tu ejemplo:

$(document).ready(function () {
    $(''#export'').on(''click'', function () {
        // TODO
        var can = document.getElementById(''canvas1'');
        var ctx = can.getContext(''2d'');
        var img = new Image();
        var svg = document.getElementById(''aaa'');
        var xml = (new XMLSerializer).serializeToString(svg);
        img.src = "data:image/svg+xml;charset=utf-8,"+xml;

        ctx.drawImage(img, 0, 0);

    });
});

http://jsfiddle.net/ncv56vwf/4/

Puede llevar un poco más de trabajo en Firefox e IE11, pero es posible. Aquí hay un ejemplo que funciona en Chrome, Firefox e IE11:

var can = document.getElementById(''canvas1'');
var ctx = can.getContext(''2d'');

var img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0, 600, 600, 0, 0, 600, 600)
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg"

http://codepen.io/simonsarris/pen/rVOjby

Para que funcione en Firefox, el SVG debe tener sus atributos de width y height establecidos.

Para que funcione en IE11, DEBES usar todos los argumentos para drawImage

Answer 5

IDK qué exactamente no funciona, pero supongo, que es la biblioteca HTML2Canvas. Porque, cuando eliminé el estilo de tamaño de fuente, todo se volvió correcto:

<text x="162" text-anchor="middle" class="highcharts-title" zindex="4"
 style="color:#333333;font-weight:normal;text-decoration:normal;
font-family:Lucida Grande,Lucida Sans Unicode, Arial, Helvetica,
 sans-serif;visibility:visible;fill:#333333;width:260px;" y="25">Inventory</text>

Y este trabajo perfecto:

<text x="162" text-anchor="middle" class="highcharts-title" zindex="4" style="" y="25">Inventory</text>

lol

Answer 6

Causado por un problema en html2canvas que genera los elementos de texto dos veces.

Aplique este parche para corregirlo hasta que esta solicitud de extracción se incorpore en una versión de html2canvas:

NodeParser.prototype.getChildren = function(parentContainer) {
    return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
        var container = [node.nodeType === Node.TEXT_NODE && !(node.parentNode instanceof SVGElement) ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
        return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
    }, this));
};

Answer 7

tienes que descargar la fuente. Puedes usar @import en tu CSS como puedes ver en este violín:
http://jsfiddle.net/scraaappy/04wkvweo/ o @font-face (no probado), o use google font api agregando < link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> en el encabezado (Tangerine como muestra, pero cualquier fuente que desee aquí: https://www.google.com/fonts/ (por desgracia, no Lucida Grande)

@degr: si solo eliminas Lucida Grande, funcionará porque el navegador soporta otras fuentes especificadas, mientras que Lucida Grande no (este es el caso de google chrome en Windows). Html2canvas solo puede tratar con su fuente predeterminada, de lo contrario, debe descargarlas. Es por eso que funciona si no especifica ninguna fuente o si solo especificó las fuentes compatibles con su navegador.

Para ver las fuentes admitidas por su navegador, simplemente ajuste las configuraciones y en algún lugar de las fuentes y codificación predeterminadas, tiene un cuadro de lista que contiene la lista de todas las fuentes admitidas que le permiten elegir la fuente predeterminada que desea que se muestre (o puede jugar con javascript como se sugiere aquí: enumere todas las fuentes que puede mostrar el navegador de un usuario ) Todas las fuentes enumeradas funcionarán. Si no, debes usar el truco anterior