Html2canvas: Capturar SVG

Creado en 26 abr. 2012  ·  64Comentarios  ·  Fuente: niklasvh/html2canvas

Hola,

¿Html2canvas admite la captura de SVG? En caso afirmativo, ¿cómo se hace? ¿Podría darnos un ejemplo?

El ejemplo en tests \ images no capturó SVG.

Por favor ayuda. Muchas gracias.

Question

Comentario más útil

Hola chicos,
Resuelvo este problema (svg perdido con Firefox) cambiando un poco el código fuente.
En primer lugar, el elemento SVG debe tener el atributo de alto y ancho, sin importar si tienen píxeles o no.
entonces deberías cambiar el código fuente de:
self.image.src = " datos: imagen / svg + xml ," + (nuevo XMLSerializer ()). serializeToString (nodo);
a:
self.image.src = " datos: imagen / svg + xml ," + encodeURIComponent ((nuevo XMLSerializer ()). serializeToString (nodo));

luego disfrútalo.

Todos 64 comentarios

No, no lo hace. No es una falla en la biblioteca, sino un error en la mayoría de los navegadores (la última versión estable de Firefox, versión 12, tiene este problema solucionado y es el único en el que funciona como se esperaba afaik). El problema es que cualquier imagen SVG mancha el lienzo, haciéndolo ilegible. De forma predeterminada, html2canvas ignora el contenido que contamina la imagen, ya que queremos mantener el lienzo legible (es decir, por ejemplo, si desea utilizar toDataUrl ).

Sin embargo, si no le importa que las imágenes SVG contaminen el lienzo, puede configurar la opción allowTaint en true y los SVG deberían mostrarse correctamente para los navegadores que permiten SVG en línea.

También me gustaría señalar, si el renderizado SVG funcionara correctamente en todos los navegadores, esta biblioteca se volvería casi obsoleta, ya que los SVG se pueden usar para renderizar HTML. Ya he comprometido un código que acelera significativamente la representación del lienzo en los navegadores donde funciona la representación SVG (es decir, FF12), además de permitir la compatibilidad con todas las propiedades CSS que admite el navegador. Para obtener información, consulte https://github.com/niklasvh/html2canvas/blob/master/src/Parse.js#L1227

Hola,
Muchas gracias por tu rápida respuesta.
Intenté sus sugerencias: establezca allowTaint en verdadero como se muestra a continuación (modifique test.js):

setTimeout (function () {

        $(h2cSelector).html2canvas($.extend({
            flashcanvas: "../external/flashcanvas.min.js",
            logging: true,
            profile: true,
            useCORS: true,
            allowTaint: true
        }, h2cOptions));
    }, 100);

Se renderiza SVG con éxito en imágenes de ejemplo.html.

Pero en caso de que el SVG sea más complicado, no se representa correctamente en varios navegadores. Por ejemplo: me gustaría capturar el gráfico (http://www.highcharts.com/demo/), en Chrome: solo captura el eje xy el eje y del gráfico cuando el gráfico se representa como SVG en línea, en caso de que el gráfico renderizar como img con la fuente del archivo svg externo, no captura nada.
Al contrario de Chrome, en Firefox, no captura nada cuando el gráfico se representa como SVG en línea, pero puede capturar el gráfico con éxito cuando el gráfico es una imagen de un archivo svg externo. Lo peor está en IE9, no se captura nada.

¿Tienes alguna idea para solucionar este problema?

Usar como imagen debería funcionar para FF / Chrome. Lo que podría intentar es si un renderizado de lienzo simple usando drawImage funciona con el SVG.

+1 para esto. Tengo el mismo caso de uso que babyhero, necesito tomar una captura de pantalla de gráficos SVG de highcharts para una herramienta de informes. Podría ser posible capturar todos los SVG de highcharts individualmente, pero se representan dentro de una vista con otra información para la que nos gustaría tener la capacidad de "Guardar en captura de pantalla".

@ babyhero184 Superé esta limitación en html2canvas usando canvg (http://code.google.com/p/canvg/) para convertir SVG de gráficos altos a PNG sobre la marcha, ocultando los elementos SVG y mostrando el PNG. Luego tomé una captura de pantalla sobre la marcha con html2canvas y luego escondí el PNG y mostré el SVG de highcharts nuevamente. Es un proceso indirecto (SVG -> lienzo -> PNG -> lienzo -> PNG) pero funciona para mis necesidades.

@joeyrobert También estoy enfrentando el mismo problema con highcharts y html2canvas. Será de gran ayuda si puede compartir la esencia de su código.
Gracias por adelantado.

@joeyrobert @ Jagdeep1 otra opción es usar Fabric.js para renderizar SVG en el lienzo y luego recuperar su imagen.

+1

+1

+1

alguna solución para este problema?

@majuansari _SVG_ a _Canvas_ y _Canvas_ a _image_ funciona en Firefox, pero en Chrome hay un candado de seguridad.

Estaba usando jQuery para capturar elementos de gráficos y descubrí que Highcharts SVG no se había analizado correctamente cuando lo hice. Si alguien pasa un selector de jQuery de un gráfico, es posible que no contenga el SVG.

@mbritton prueba http://code.google.com/p/canvg/ (ForeignObject no funciona)

Sí, esa fue mi solución.

Resolví este problema reemplazando elementos svg con elementos de lienzo generados por canvg durante la captura.
Aquí está mi código.

// targetElem is a jquery obj
function take (targetElem) {
    var nodesToRecover = [];
    var nodesToRemove = [];

    var svgElem = targetElem.find('svg');

    svgElem.each(function(index, node) {
        var parentNode = node.parentNode;
        var svg = parentNode.innerHTML;

        var canvas = document.createElement('canvas');

        canvg(canvas, svg);

        nodesToRecover.push({
            parent: parentNode,
            child: node
        });
        parentNode.removeChild(node);

        nodesToRemove.push({
            parent: parentNode,
            child: canvas
        });

        parentNode.appendChild(canvas);
    });

    html2canvas(targetElem, {
        onrendered: function(canvas) {
            var ctx = canvas.getContext('2d');
            ctx.webkitImageSmoothingEnabled = false;
            ctx.mozImageSmoothingEnabled = false;
            ctx.imageSmoothingEnabled = false;

            canvas.toBlob(function(blob) {
                nodesToRemove.forEach(function(pair) {
                    pair.parent.removeChild(pair.child);
                });

                nodesToRecover.forEach(function(pair) {
                    pair.parent.appendChild(pair.child);
                });
                saveAs(blob, 'screenshot_'+ moment().format('YYYYMMDD_HHmmss')+'.png');
            });
        }
    });
}

Solo una nota rapida:
Estoy seguro de que canvg está funcionando bien, pero si simplemente desea convertir SVG a lienzo, puede usar la técnica simple descrita aquí que carga el svg en una imagen y luego obtiene el contenido de la imagen como dataURL.

var image = new Image();
var xml = '<svg xmlns=....></svg>';
image.src = 'data:image/svg+xml,' + escape(xml); 
document.getElementById('container').appendChild(image);
image.onload = function() {
    image.onload = function() {};
    var canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    var context = canvas.getContext('2d');
    context.drawImage(image, 0, 0);
    image.src = canvas.toDataURL();
}

@steren : Si bien esto funciona muy bien en Chrome, ¿existe una solución para Firefox, que produce un NS_ERROR_NOT_AVAILABLE en la línea context.drawImage (image, 0, 0) - aparentemente un error conocido - o IE 11 donde aparece un SecurityError en el lienzo. toDataURL () a pesar de que la imagen está en el mismo dominio? No he podido ejecutarlo en otros navegadores además de Chrome ...

@gifarangw tu código funciona bien con highcharts. Gracias por tu maravilloso código. : +1: Lo único que eliminé fue la parte canvas.toBlob.

@steren gracias por su solución, funciona bien (probado en los últimos Chrome y Firefox), y no necesita una biblioteca adicional, lo cual es bueno. Hice algunos cambios y combiné con el código de @gifarangw y obtuve:

    function take(targetElem) {
        // First render all SVGs to canvases
        var elements = targetElem.find('svg').map(function() {
            var svg = $(this);
            var canvas = $('<canvas></canvas>');
            svg.replaceWith(canvas);

            // Get the raw SVG string and curate it
            var content = svg.wrap('<p></p>').parent().html();
            content = content.replace(/xlink:title="hide\/show"/g, "");
            content = encodeURIComponent(content);
            svg.unwrap();

            // Create an image from the svg
            var image = new Image();
            image.src = 'data:image/svg+xml,' + content;
            image.onload = function() {
                canvas[0].width = image.width;
                canvas[0].height = image.height;

                // Render the image to the canvas
                var context = canvas[0].getContext('2d');
                context.drawImage(image, 0, 0);
            };
            return {
                svg: svg,
                canvas: canvas
            };
        });
        targetElem.imagesLoaded(function() {
            // At this point the container has no SVG, it only has HTML and Canvases.
            html2canvas(targetElem[0], {
                onrendered: function(canvas) {
                    // Put the SVGs back in place
                    elements.each(function() {
                        this.canvas.replaceWith(this.svg);
                    });

                    // Do something with the canvas, for example put it at the bottom
                 $(canvas).appendTo('body');
                }
            })
        })
    }

(usa https://github.com/desandro/imagesloaded)

¡Hola a todos, solo para decirles que la solución @Remiremi funcionó muy bien para mí! Tengo una página con muchos gráficos creados con HighStocks en svg y esta solución funcionó muy bien. ¡Bien hecho muchachos!

@Remiremi @fbotti , por alguna razón no entro en img.onLoad, por lo tanto, los gráficos desaparecen (no se reemplazan con el lienzo)

Estoy trabajando con amcharts. ¿Alguna idea?

@guypaskar, su svg podría necesitar ser curado más. Puede agregar $(image).appendTo('body'); al código antes de configurar image.onload , luego en Firefox verá un icono para la imagen no válida, puede hacer clic derecho> ver imagen y ver el error.

Probé rápidamente un svg de amcharts y tuve que agregar las propiedades xmlns="http://www.w3.org/2000/svg" width="1400" height="500" a la etiqueta svg para que funcionara. (La altura y el ancho se especificaron como propiedades css, pero por alguna razón no se recogieron).

He encontrado una solución sencilla.

Asegúrate de que tu imagen svg tenga ancho y alto.

De lo contrario, no hay suficientes argumentos porque un svg no se puede medir como una imagen.

¿Alguien puede recapitular sobre este tema? ¿Está resuelto el problema original? Parece que ciertos problemas del navegador que pueden haber causado la mayoría de los problemas mencionados aquí se han solucionado desde 2012. Según algunos comentarios aquí, ¿ya no es necesario el uso de otras bibliotecas como canvg?

Para los problemas restantes, ¿estarían cubiertos por # 197 y / o # 267? ¿Se puede cerrar este?

Sigue siendo un problema con al menos algunos navegadores.

0.5 agrega soporte para SVG

¿Alguna vista previa cuando saldrá 0.5 @niklasvh ?

@IvoPereira Puede seguir el estado de 0.5 en # 421

@niklasvh Tengo la versión 0.5 y SVG todavía no se procesa. ¿Hay algún ejemplo de cómo hacerlo? (Es un SVG en línea)

@nikolang, ¿ html2canvas.js y html2canvas.svg.js ? Si es así, ¿puede proporcionar un jsFiddle o jsbin para demostrar su problema específico?

Conseguí que esto funcione. El problema era que el SVG no estaba completamente renderizado cuando hice html2canvas.

Pero parece que todavía hay algunos problemas con el renderizado. Por ejemplo http://d3pie.org

Así es como se supone que debe verse:

screen

Así es como se ve después de html2canvas:

canvas

Vaya, eso es bastante espeluznante. Para que sea más fácil de rastrear, ¿puede abrir un problema separado con las mismas capturas de pantalla y un enlace a solo un jsFiddle con la demostración? Esto se está alejando demasiado del problema original, que se cerró hace mucho tiempo. ¡Gracias por informarlo!

Me encantaría hacer eso, pero no sé cómo incluir el nuevo html2canvas en jsfiddle. ¿Hay algún enlace externo que pueda utilizar?

Gracias. ¿Y la versión SVG?

Hola,

Los SVG se representan de mi lado, pero aparecen en negro, como lo informó alguien a continuación. ¿Hay alguna forma de contar la propiedad de "relleno" de los elementos svg?

@brainra , estoy usando algo como esto para hacer que el relleno sea blanco:

// Create dummy canvas to get a white background
var destinationCanvas = document.createElement("canvas");
destinationCanvas.width = canvas.width;
destinationCanvas.height = canvas.height;

var destCtx = destinationCanvas.getContext('2d');

//create a rectangle with the desired color
destCtx.fillStyle = "#FFFFFF";
destCtx.fillRect(0,0,canvas.width,canvas.height);

//draw the original canvas onto the destination canvas
destCtx.drawImage(canvas, 0, 0);

var img = destinationCanvas.toDataURL("image/png");

Error al ejecutar 'drawImage' en 'CanvasRenderingContext2D': El HTMLImageElement proporcionado está en el estado 'roto'. "

Recibo este error cuando hay un elemento svg en HTML.
También he establecido allowTaint en true. ¿Alguien puede ayudarme?

Creo que esto debería reabrirse: los elementos svg se representan correctamente en todos los navegadores excepto en Firefox.

NS_ERROR_NOT_AVAILABLE: este es un error de Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=700533 (AFAICT) hay una página de prueba que destaca el problema (vinculado desde el error) http://phrogz.net/ SVG / svg_to_png.xhtml

Se agradecería mucho una solución alternativa. O tal vez alguien podría empujar a alguien @mozilla para arreglar esto :)

Intenté esto usando angular pero terminé con un lienzo contaminado. ¿Supongo que necesito el SVG sin procesar?

<img svg-2-canvas-src="/assets/your.svg"/>

angular.module('APP')
    .directive('svg2CanvasSrc', function() {
        return {
            restrict: 'A',
            scope: false,
            link: function($scope, $element, $attrs) {

                var svgSrc = $attrs['svg2CanvasSrc'];

                var image = new Image();

                image.onload = function() {
                    image.onload = function() {};
                    var canvas = document.createElement('canvas');
                    canvas.width = image.width;
                    canvas.height = image.height;
                    var context = canvas.getContext('2d');
                    context.drawImage(image, 0, 0);
                    $element[0].src = canvas.toDataURL();
                };

                image.src = svgSrc;
            }
        };
    });

@remiremi utilicé su código pero el resultado es el mismo, falta svg ..
original: https://s29.postimg.org/5lkprhx93/with_SVG.png
resultado - https://s23.postimg.org/j1otj2por/without_SVG.png

@remiremi ... ¿

Básicamente, establecer un ancho / alto explícito en el SVG justo antes de llamar a html2canvas soluciona la mayoría de los casos.
Lo que hago es recorrer los diversos elementos SVG de interés, obtener el ancho / alto calculado en su navegador usando .getBoundingClientRect () y establecer la propiedad de ancho alto en el elemento, noté que cuando los SVG tienen un porcentaje y un ancho / alto similar establecido, no lo hace 't render, pero con píxeles, Booyah

Sin embargo, todavía tengo problemas para renderizar span y div de varias líneas

Hola chicos,
Resuelvo este problema (svg perdido con Firefox) cambiando un poco el código fuente.
En primer lugar, el elemento SVG debe tener el atributo de alto y ancho, sin importar si tienen píxeles o no.
entonces deberías cambiar el código fuente de:
self.image.src = " datos: imagen / svg + xml ," + (nuevo XMLSerializer ()). serializeToString (nodo);
a:
self.image.src = " datos: imagen / svg + xml ," + encodeURIComponent ((nuevo XMLSerializer ()). serializeToString (nodo));

luego disfrútalo.

¿Alguien tiene una idea de cómo llamaría html2canvas en un elemento SVG en el DOM?

¡Un ejemplo sería genial!

+1 sigue siendo un problema para capturar la captura de pantalla del elemento SVG en Firefox.

{
  profile: true,
  allowTaint: false,
  onrendered: function() {
    //...done()
  }
}

Oye, pude resolver este problema usando esta solución (sin jQuery):
Solución

deja targetElem =document.getElementById ('cuerpo');
let nodesToRecover = [];
let nodesToRemove = [];

    let svgElem = targetElem.querySelector('svg')

    let parentNode = svgElem.parentNode;
        // let svg = parentNode.innerHTML;
        let svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" id=\"svg-annotations\" style=\"opacity: 1;\" _ngcontent-c7=\"\">\n\t\t\t<defs><marker id=\"arrow-start\" refY=\"4.5\" markerWidth=\"9.9\" markerHeight=\"9\" orient=\"auto\"><path fill=\"black\" d=\"M 9.9 0 L 9.9 9 L 0 4.5 Z\" /></marker><marker id=\"arrow-end\" refX=\"9.9\" refY=\"4.5\" markerWidth=\"9.9\" markerHeight=\"9\" orient=\"auto\"><path fill=\"black\" d=\"M 0 0 L 0 9 L 9.9 4.5 Z\" /></marker></defs><g class=\"annotation-group\" id=\"measurement-36122\" style=\"opacity: 1;\"><g class=\"annotations\"><g class=\"annotation callout elbow editable \" transform=\"translate(758.541 408.978)\"><g class=\"annotation-connector\"><path class=\"connector\" fill=\"none\" stroke=\"black\" d=\"M 0 0 L 137 137 L 162 137\" /></g><g class=\"annotation-note\" transform=\"translate(162 137)\"><g class=\"annotation-note-content\" transform=\"translate(0 3)\"><rect class=\"annotation-note-bg\" fill=\"white\" fill-opacity=\"0\" x=\"0\" width=\"104.79\" height=\"41.36\" /><text class=\"annotation-note-label\" fill=\"black\" y=\"41.36\" dx=\"0\"><tspan x=\"0\" dy=\"0.8em\" /></text><text class=\"annotation-note-title\" font-weight=\"bold\" fill=\"black\"><tspan x=\"0\" dy=\"0.8em\">Face</tspan><tspan x=\"0\" dy=\"1.2em\">:5453831.5mm²</tspan></text></g><path class=\"note-line\" stroke=\"black\" d=\"M 0 0 L 104.79 0\" /><circle class=\"handle \" cursor=\"move\" fill=\"grey\" fill-opacity=\"0.1\" stroke=\"grey\" stroke-dasharray=\"5\" cx=\"0\" cy=\"0\" r=\"10\" /></g></g></g></g><g class=\"annotation-group\" id=\"measurement-59622\" style=\"opacity: 1;\"><g class=\"annotations\"><g class=\"annotation callout elbow editable \" transform=\"translate(889.656 387.507)\"><g class=\"annotation-connector\"><path class=\"connector\" fill=\"none\" stroke=\"black\" d=\"M 0 0 L 137 137 L 162 137\" /></g><g class=\"annotation-note\" transform=\"translate(162 137)\"><g class=\"annotation-note-content\" transform=\"translate(0 3)\"><rect class=\"annotation-note-bg\" fill=\"white\" fill-opacity=\"0\" x=\"0\" width=\"104.79\" height=\"41.36\" /><text class=\"annotation-note-label\" fill=\"black\" y=\"41.36\" dx=\"0\"><tspan x=\"0\" dy=\"0.8em\" /></text><text class=\"annotation-note-title\" font-weight=\"bold\" fill=\"black\"><tspan x=\"0\" dy=\"0.8em\">Face</tspan><tspan x=\"0\" dy=\"1.2em\">:5453831.5mm²</tspan></text></g><path class=\"note-line\" stroke=\"black\" d=\"M 0 0 L 104.79 0\" /><circle class=\"handle \" cursor=\"move\" fill=\"grey\" fill-opacity=\"0.1\" stroke=\"grey\" stroke-dasharray=\"5\" cx=\"0\" cy=\"0\" r=\"10\" /></g></g></g></g></svg>";

        this.canvas = document.createElement('canvas');
        this.canvas.setAttribute('id', '_canvas');

        canvg(this.canvas, svg, {renderCallback: function(){
            console.log(this);
        }});

        nodesToRecover.push({
            parent: parentNode,
            child: svgElem
        });
        parentNode.removeChild(svgElem);

        nodesToRemove.push({
            parent: parentNode,
            child: this.canvas
        });

        parentNode.appendChild(this.canvas);
        let data = this.canvas.toDataURL('image/png', 0.5);
        console.log(data);

Estoy haciendo esto, pero obtengo solo una imagen en blanco en IE11. Pero puedo ver el lienzo en la página web. ¿Alguien puede ayudarme en lo que estoy haciendo mal aquí?

Hola. Tengo un problema para renderizar svg cuando este tiene <image> etiqueta.
barchart (24)

Svg de muestra

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/>
</svg>

Muestra en jsfiddle http://jsfiddle.net/maestro888/fmjywksq/

He encontrado una solución sencilla.

Asegúrate de que tu imagen svg tenga ancho y alto.

De lo contrario, no hay suficientes argumentos porque un svg no se puede medir como una imagen.

Esto es cierto pero no para IE11, desafortunadamente ...

Me alegro de que lo hayas resuelto.
Acabo de comprobar su JS Fiddle y muestra la imagen.

Saludos,

Bernard TA Baker

El miércoles 27 de marzo de 2019 a las 4:34 p.m. Alessandro Candini [email protected]
escribió:

He encontrado una solución sencilla.

Asegúrate de que tu imagen svg tenga ancho y alto.

No hay suficientes argumentos de lo contrario porque no se puede medir un svg
como puede hacerlo una imagen.

Esto es cierto pero no para IE11, desafortunadamente ...

-
Estás recibiendo esto porque comentaste.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/niklasvh/html2canvas/issues/95#issuecomment-477242192 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/AM7ZzLPsl0WJS7gGI9npSsRxR33FCnN9ks5va52bgaJpZM4AD-Sb
.

Encontré una solución con canvg , informada aquí en el desbordamiento de pila : ¡funciona perfectamente en IE11!

Mi fragmento reelaborado, eliminando la dependencia de jQuery:

let svgIcons = document.querySelectorAll('.svg-icon');

for (let i = 0; i < svgIcons.length; ++i) {
  let curSvg = svgIcons[i];
  let canvas;
  let xml;

  // Size and color needed for every browser
  curSvg.setAttribute('width', curSvg.parentNode.offsetWidth);
  curSvg.setAttribute('height', curSvg.parentNode.offsetHeight);
  curSvg.setAttribute('style', 'fill: blue');

  canvas = document.createElement('canvas');
  canvas.className = 'screenShotTempCanvas';
  xml = new XMLSerializer().serializeToString(curSvg);
  canvg(canvas, xml);
  curSvg.parentNode.insertBefore(canvas, curSvg.nextSibling);
  curSvg.style.display = 'none';
 }

Excelente

El jueves 28 de marzo de 2019, a las 08:49 Alessandro Candini, [email protected]
escribió:

Encontré una solución con canvg https://github.com/canvg/canvg ,
informado aquí en el desbordamiento de pila
https://stackoverflow.com/questions/34042440/using-html2canvas-to-render-a-highcharts-chart-to-pdf-doesnt-work-on-ie-and-fir :
¡Funciona perfectamente en IE11!

-
Estás recibiendo esto porque comentaste.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/niklasvh/html2canvas/issues/95#issuecomment-477503221 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/AM7ZzKNy1GOgQU9TVv7PGCi4fJvYSxDVks5vbIIOgaJpZM4AD-Sb
.

Hola @niklasvh Es bueno ver su biblioteca de javascript html2canvas. Es una biblioteca increíble, pero todavía estoy enfrentando el mismo problema para convertir el svg en la creación de un lienzo usando la versión npm "1.0.0-alpha.12
"así como la versión" 1.0.0-rc.1 "también en nuestra aplicación anguar6, según su respuesta de la lista de problemas, el problema vendrá svg no contiene la altura y el ancho, pero en mi caso mi Svg tiene El 100% de altura y ancho y el div anidado también contiene la etiqueta svg y el lienzo existente anidado también, puedo exportar mi página como una imagen png, pero la imagen contiene solo los iconos svg bloqueados y el lienzo existente tampoco se renderiza. mi svg de otra página se muestra como imágenes bloqueadas. para su referencia adjunto mi captura de pantalla aquí, por favor, eche un vistazo una vez y hágamelo saber gracias.
html2canvas (this.screen.nativeElement, {useCORS: true}). luego (lienzo => {
this.canvas.nativeElement.src = canvas.toDataURL ('imagen / png');
this.downloadLink.nativeElement.href = canvas.toDataURL ('imagen / png');
this.downloadLink.nativeElement.download = 'captura de pantalla.png';
this.downloadLink.nativeElement.click ();
});

html2canvas_orginal_Before export
html2canvas_orginal_after export
html2canvas_exported image

testpdf (1) .pdf
Hola,
Obtengo el eje, pero el resto del área del gráfico es negro. Cualquier sugerencia

Hola @niklasvh Es bueno ver su biblioteca de javascript html2canvas. Es una biblioteca increíble, pero todavía estoy enfrentando el mismo problema para convertir el svg en la creación de un lienzo usando la versión npm "1.0.0-alpha.12
"así como la versión" 1.0.0-rc.1 "también en nuestra aplicación anguar6, según su respuesta de la lista de problemas, el problema vendrá svg no contiene la altura y el ancho, pero en mi caso mi Svg tiene El 100% de altura y ancho y el div anidado también contiene la etiqueta svg y el lienzo existente anidado también, puedo exportar mi página como una imagen png, pero la imagen contiene solo los iconos svg bloqueados y el lienzo existente tampoco se renderiza. mi svg de otra página se muestra como imágenes bloqueadas. para su referencia adjunto mi captura de pantalla aquí, por favor, eche un vistazo una vez y hágamelo saber gracias.
html2canvas (this.screen.nativeElement, {useCORS: true}). luego (lienzo => {
this.canvas.nativeElement.src = canvas.toDataURL ('imagen / png');
this.downloadLink.nativeElement.href = canvas.toDataURL ('imagen / png');
this.downloadLink.nativeElement.download = 'captura de pantalla.png';
this.downloadLink.nativeElement.click ();
});

html2canvas_orginal_Before export
html2canvas_orginal_after export
html2canvas_exported image

el mismo problema, Error al encontrar el svg en el documento clonado

Antes de usar html2canvas, estoy configurando temporalmente la altura y el ancho de los SVG. De esta manera puedo capturar el archivo svg.

var selectedItem = document.querySelector (". chartWrapper");
var svgElements = selectedItem.querySelectorAll ('svg');
para (sea i = 0; i <svgElements.length; i ++) {
selectedItem.getElementsByTagName ("svg") [i] .style.height = document.getElementsByTagName ("svg") [i] .getBoundingClientRect (). altura;
selectedItem.getElementsByTagName ("svg") [i] .style.width = document.getElementsByTagName ("svg") [i] .getBoundingClientRect (). width;
}
html2canvas (selectedItem, {backgroundColor: '# 000', allowTaint: true}). luego (lienzo => {
var myImage = canvas.toDataURL ("image / png"). replace ("image / png", "image / octet-stream");
window.location.href = myImage;
})
para (sea i = 0; i <svgCount; i ++) {
selectedItem.getElementsByTagName ("svg") [i] .style.height = '100%';
selectedItem.getElementsByTagName ("svg") [i] .style.width = '100%';
}

// use html2canvas in react project when i need a screenshot for the svg
/**
 * svg to canvas
 * <strong i="5">@param</strong> targetElem
 * <strong i="6">@return</strong> {Promise<[]>} // return svg elements
 */
async function svgToCanvas(targetElem) {
  let nodesToRecover = [], nodesToRemove = [], svgElems = targetElem.querySelectorAll('svg');

  for (let i = 0; i < svgElems.length; i++) {
    let node = svgElems[i], parentNode = node.parentNode, svg = parentNode.innerHTML,
      canvas = document.createElement('canvas'),
      ctx = canvas.getContext('2d');
    canvas.setAttribute('data-cover', 'svg');
    const v = await Canvg.from(ctx, svg);
    v.start();
    // record svg elements
    nodesToRecover.push({
      parent: parentNode,
      child: node
    });
    parentNode.removeChild(node);
    //  record canvas elements
    nodesToRemove.push({
      parent: parentNode,
      child: canvas
    });

    parentNode.appendChild(canvas);
  }
  return nodesToRecover;
}

/**
 * recover canvas to svg
 * <strong i="7">@param</strong> targetElem
 * <strong i="8">@param</strong> svgElems // need to recover svg elements
 * <strong i="9">@return</strong> *
 */
function recoverCanvasToSvg(targetElem, svgElems) {
  let canvasElems = targetElem.querySelectorAll("canvas[data-cover='svg']");
  if(!targetElem){
    throw new Error('must have targetElem param')
  }
  if(!isArray(svgElems) && svgElems.length !== canvasElems.length) {
    throw new Error('svgElems must be an Array, and it`s length equal to canvasElems`s length')
  }
  for(let i = 0; i < canvasElems.length; i++){
    let node = canvasElems[i], parentNode = node.parentNode;
    parentNode.removeChild(node);
    parentNode.appendChild(svgElems[i]?.child);
  }
}
¿Fue útil esta página
0 / 5 - 0 calificaciones