Html2canvas: Capturer SVG

Non. Ce n'est pas un défaut dans la bibliothèque, mais un bogue dans la plupart des navigateurs (la dernière version stable de Firefox, version 12, a corrigé ce problème et est le seul où cela fonctionne comme prévu). Le problème est que toute image SVG tache le canevas, le rendant illisible. Par défaut, html2canvas ignore le contenu qui ternit l'image, car nous voulons que le canevas reste lisible (c'est-à-dire par exemple si vous souhaitez utiliser toDataUrl ).

Si toutefois vous ne vous souciez pas que les images SVG contaminent le canevas, vous pouvez définir l'option allowTaint sur true et les SVG devraient s'afficher correctement pour les navigateurs qui autorisent le SVG en ligne.

Je tiens également à souligner que si le rendu SVG fonctionnait correctement entre les navigateurs, cette bibliothèque deviendrait presque obsolète, car les SVG peuvent être utilisés pour rendre du HTML. J'ai déjà commis du code qui accélère considérablement le rendu du canevas sur les navigateurs où le rendu SVG fonctionne (c'est-à-dire FF12), ainsi que le support de toutes les propriétés CSS prises en charge par le navigateur. Pour plus d'informations, consultez https://github.com/niklasvh/html2canvas/blob/master/src/Parse.js#L1227

Bonjour,
Merci beaucoup pour votre réponse rapide.
J'ai essayé vos suggestions: définissez allowTaint sur true comme ci-dessous (modifiez test.js):

setTimeout (fonction () {

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

Il rend SVG avec succès dans l'exemple images.html.

Mais si le SVG est plus compliqué, il ne s'affiche pas correctement dans le navigateur croisé. Par exemple: je voudrais capturer le graphique (http://www.highcharts.com/demo/), dans Chrome: il capture simplement l'axe x et l'axe y du graphique lorsque le graphique est rendu en SVG en ligne, dans le cas du graphique rendu comme img avec la source du fichier svg extenal, il ne capture rien.
Contrairement à Chrome, dans Firefox, il ne capture rien lorsque le graphique est rendu en SVG en ligne, mais peut capturer le graphique avec succès lorsque le graphique est une image d'un fichier svg externe. Le pire est dans IE9, rien n'est capturé.

Avez-vous une idée pour résoudre ce problème?

L'utilisation comme image devrait fonctionner pour FF / Chrome. Ce que vous pouvez essayer est de savoir si un simple rendu de canevas utilisant drawImage fonctionne avec le SVG.

+1 pour cela. J'ai le même cas d'utilisation que babyhero, je dois prendre une capture d'écran de graphiques SVG highcharts pour un outil de reporting. Il est peut-être possible de saisir individuellement tous les SVG highcharts, mais ils sont rendus dans une vue avec d'autres informations pour lesquelles nous aimerions avoir la capacité "Enregistrer dans une capture d'écran".

@ babyhero184 J'ai contourné cette limitation dans html2canvas en utilisant canvg (http://code.google.com/p/canvg/) pour convertir des SVG highcharts en PNG à la volée, en masquant les éléments SVG et en affichant le PNG. Ensuite, j'ai pris une capture d'écran à la volée avec html2canvas, puis j'ai caché le PNG et montré à nouveau le SVG highcharts. C'est un processus détourné (SVG -> toile -> PNG -> toile -> PNG) mais cela fonctionne pour mes besoins.

@joeyrobert Je suis également confronté au même problème avec highcharts et html2canvas. Ce sera d'une grande aide si vous pouvez partager l'essentiel de votre code.
Merci d'avance.

@joeyrobert @ Jagdeep1 une autre option consiste à utiliser Fabric.js pour rendre SVG sur le canevas, puis récupérer son image.

+1

+1

+1

une solution à ce problème?

@majuansari _SVG_ to _Canvas_ et _Canvas_ to _image_ fonctionne dans Firefox, mais dans Chrome, il existe un verrou de sécurité.

J'utilisais jQuery pour capturer des éléments de graphique et j'ai découvert que le SVG Highcharts n'était pas correctement analysé quand je l'ai fait. Si quelqu'un passe un sélecteur jQuery d'un graphique, il peut ne pas contenir le SVG.

@mbritton essayez http://code.google.com/p/canvg/ (ForeignObject ne fonctionne pas)

Oui, c'était ma solution.

J'ai résolu ce problème en remplaçant les éléments svg par des éléments canvas générés par canvg lors de la capture.
Voici mon code.

// 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');
            });
        }
    });
}

Juste un petit mot:
Je suis sûr que canvg fonctionne bien, mais si vous voulez simplement convertir SVG en canevas, vous pouvez utiliser la technique simple décrite ici qui charge le svg dans une image, puis récupère le contenu de l'image sous forme d'URL de données.

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 : Bien que cela fonctionne très bien dans Chrome, existe-t-il une solution de contournement pour Firefox, qui produit un NS_ERROR_NOT_AVAILABLE sur la ligne context.drawImage (image, 0, 0) - apparemment un bug connu - ou IE 11 où une SecurityError apparaît sur le canevas. toDataURL () alors que l'image se trouve sur le même domaine? Je n'ai pas pu le faire fonctionner dans d'autres navigateurs que Chrome ...

@gifarangw votre code fonctionne très bien avec les highcharts. Merci pour votre merveilleux code. : +1: La seule chose que j'ai supprimée était la partie canvas.toBlob.

@steren merci pour votre solution, cela fonctionne bien (testé sur les derniers Chrome et Firefox), et il n'a pas besoin d'une bibliothèque supplémentaire, ce qui est bien. J'ai apporté quelques modifications et combiné avec le code de @gifarangw et j'ai obtenu:

    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');
                }
            })
        })
    }

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

Salut à tous juste pour dire que la solution @Remiremi a très bien fonctionné pour moi! J'ai une page avec beaucoup de graphiques créés avec HighStocks en svg et cette solution a très bien fonctionné! Bravo les gars!

@Remiremi @fbotti , Pour une raison quelconque, je ne rentre pas dans img.onLoad ainsi, les graphiques disparaissent (ne sont pas remplacés par le canevas)

Je travaille avec amcharts. Une idée?

@guypaskar votre svg pourrait avoir besoin d'être organisé davantage. Vous pouvez ajouter $(image).appendTo('body'); au code avant de définir image.onload , puis dans Firefox, vous verrez une icône pour l'image invalide, vous pouvez faire un clic droit> afficher l'image et voir l'erreur.

J'ai essayé rapidement un svg amcharts et j'ai dû ajouter les propriétés xmlns="http://www.w3.org/2000/svg" width="1400" height="500" à la balise svg pour que cela fonctionne. (La hauteur et la largeur ont été spécifiées en tant que propriétés css, mais pour une raison quelconque, elles n'ont pas été prises en compte.)

J'ai trouvé une solution simple.

Assurez-vous que votre image svg a une largeur et une hauteur.

Sinon, il n'y a pas assez d'arguments car un svg ne peut pas être mesuré comme une image.

Quelqu'un peut-il récapituler sur ce problème? Le problème d'origine est-il résolu? Il semble que certains problèmes de navigateur qui ont pu causer la majorité des problèmes mentionnés ici ont été corrigés depuis 2012. Selon certains commentaires ici, l'utilisation d'autres bibliothèques telles que canvg n'est plus nécessaire?

Pour les problèmes restants, seraient-ils couverts par le numéro 197 et / ou le numéro 267? Celui-ci peut-il être fermé?

C'est toujours un problème avec au moins certains navigateurs

0.5 ajoute la prise en charge des SVG

Un aperçu lorsque 0.5 sortira @niklasvh ?

@IvoPereira Vous pouvez suivre l'état de 0,5 dans # 421

@niklasvh J'ai la version 0.5 et SVG ne s'affiche toujours pas. Y a-t-il un exemple comment faire? (C'est un SVG en ligne)

@nikolang avez-vous inclus html2canvas.js et html2canvas.svg.js ? Si tel est le cas, pouvez-vous fournir un jsFiddle ou un jsbin pour illustrer votre problème spécifique?

J'ai fait fonctionner ça. Le problème était que le SVG n'était pas entièrement rendu lorsque j'ai fait html2canvas.

Mais il semble qu'il y ait encore des problèmes de rendu. Par exemple http://d3pie.org

Voici à quoi il est censé ressembler:

Voici à quoi cela ressemble après html2canvas:

Whoa, c'est assez effrayant. Pour que cela soit plus facile à suivre, pouvez-vous ouvrir un problème séparé avec les mêmes captures d'écran et un lien vers juste un jsFiddle avec la démo? Cela s'éloigne trop du problème initial, qui a été fermé il y a longtemps. Merci de l'avoir signalé!

J'adorerais faire ça mais je ne sais pas comment inclure le nouveau html2canvas dans jsfiddle. Puis-je utiliser un lien externe?

@nikolang Vous pouvez utiliser http://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.js .

Merci. Et la version SVG?

De même: http://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.svg.js .

Salut,

Les SVG sont rendus de mon côté, mais apparaissent en noir, comme indiqué par quelqu'un ci-dessous. Existe-t-il un moyen de compter la propriété "fill" des éléments svg?

@brainra , j'utilise quelque chose comme ça pour rendre le remplissage blanc:

// 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");

Échec de l'exécution de 'drawImage' sur 'CanvasRenderingContext2D': le HTMLImageElement fourni est dans l'état 'cassé'. "

J'obtiens cette erreur lorsqu'il y a un élément svg dans HTML.
J'ai également défini allowTaint sur true. Quelqu'un peut-il m'aider s'il vous plaît?

Je pense que cela devrait être rouvert - les éléments svg sont correctement rendus dans tous les navigateurs sauf Firefox.

NS_ERROR_NOT_AVAILABLE: il s'agit d'un bug de Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=700533 (AFAICT) il y a une page de test qui met en évidence le problème (lié à partir du bogue) http://phrogz.net/ SVG / svg_to_png.xhtml

Une solution de contournement / correction serait grandement appréciée. Ou peut-être que quelqu'un pourrait pousser quelqu'un @mozilla pour problème :)

Voici votre solution:
http://stackoverflow.com/questions/18271898/html-and-svg-to-canvas-javascript/32457864#32457864

J'ai essayé cela en utilisant angulaire mais j'ai fini avec une toile contaminée. Je suppose que j'ai besoin du SVG brut?

<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 j'ai utilisé votre code mais le résultat est le même, svg est manquant ..
original - https://s29.postimg.org/5lkprhx93/with_SVG.png
résultat - https://s23.postimg.org/j1otj2por/without_SVG.png

@remiremi ... quel est le nom du plugin que j'ai attaché lorsque um utilise ce script

En gros, définir une largeur / hauteur explicite sur le SVG juste avant d'appeler html2canvas résout la plupart des cas pour moi.
Ce que je fais est de parcourir les différents éléments SVG d'intérêts, d'obtenir la largeur / hauteur calculée de leur navigateur en utilisant .getBoundingClientRect () et de définir la propriété width height sur l'élément, j'ai remarqué que les SVG ont un pourcentage et une largeur / hauteur similaire, cela ne fonctionne pas pas de rendu, mais avec des pixels, Booyah

J'ai toujours des problèmes pour rendre les span et les div multi-lignes

Salut les gars,
Je résous ce problème (svg perdu avec Firefox) en modifiant un peu le code source.
Tout d'abord, l'élément SVG doit avoir un attribut de hauteur et de largeur, qu'il s'agisse de pixels ou non.
alors vous devez changer le code source de:
self.image.src = " données: image / svg + xml ," + (nouveau XMLSerializer ()). serializeToString (nœud);
à:
self.image.src = " data: image / svg + xml ," + encodeURIComponent ((new XMLSerializer ()). serializeToString (node));

alors profitez-en.

Quelqu'un a-t-il une idée de la façon dont j'appellerais html2canvas sur un élément SVG dans le DOM?

Un exemple serait génial!

+1 toujours un problème pour capturer la capture d'écran de l'élément SVG dans Firefox.

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

Hé, j'ai pu résoudre ce problème en utilisant cette solution (sans jQuery):
Solution

laissez targetElem =document.getElementById ('corps');
laissez nodesToRecover = [];
laissez 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);

Je fais cela, mais je ne reçois qu'une image vierge dans IE11. Mais, je peux voir la toile sur la page Web. Quelqu'un peut-il s'il vous plaît m'aider ce que je fais mal ici?

Bonjour. J'ai un problème pour rendre svg quand cela a <image> balise

Exemple de svg

<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>

Exemple dans jsfiddle http://jsfiddle.net/maestro888/fmjywksq/

J'ai trouvé une solution simple.

Assurez-vous que votre image svg a une largeur et une hauteur.

Sinon, il n'y a pas assez d'arguments car un svg ne peut pas être mesuré comme une image.

C'est vrai mais pas pour IE11, malheureusement ...

Heureux que vous ayez réglé le problème.
Je viens de vérifier votre JS Fiddle et il affiche l'image.

Cordialement,

Bernard TA Baker

Le mer 27 mars 2019 à 16:34 Alessandro Candini [email protected]
a écrit:

J'ai trouvé une solution simple.

Assurez-vous que votre image svg a une largeur et une hauteur.

Il n'y a pas assez d'arguments sinon parce qu'un svg ne peut pas être mesuré
comme une image peut.

C'est vrai mais pas pour IE11, malheureusement ...

-
Vous recevez ceci parce que vous avez commenté.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/niklasvh/html2canvas/issues/95#issuecomment-477242192 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/AM7ZzLPsl0WJS7gGI9npSsRxR33FCnN9ks5va52bgaJpZM4AD-Sb
.

J'ai trouvé une solution avec canvg , rapportée ici sur le débordement de pile : cela fonctionne parfaitement sur IE11!

Mon extrait de code réélaboré, supprimant la dépendance 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';
 }

Génial

Le jeu.28 mars 2019, 08:49 Alessandro Candini, [email protected]
a écrit:

J'ai trouvé une solution avec canvg https://github.com/canvg/canvg ,
signalé ici sur le débordement de pile
https://stackoverflow.com/questions/34042440/using-html2canvas-to-render-a-highcharts-chart-to-pdf-doesnt-work-on-ie-and-fir :
cela fonctionne parfaitement sur IE11!

-
Vous recevez ceci parce que vous avez commenté.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/niklasvh/html2canvas/issues/95#issuecomment-477503221 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/AM7ZzKNy1GOgQU9TVv7PGCi4fJvYSxDVks5vbIIOgaJpZM4AD-Sb
.

Salut @niklasvh Agréable de voir votre bibliothèque javascript html2canvas, c'est une bibliothèque géniale, mais je suis toujours confronté au même problème pour rendre le svg dans la création de canevas en utilisant la version npm "1.0.0-alpha.12
"ainsi que la version" 1.0.0-rc.1 "également dans notre application anguar6, selon votre réponse de la liste des problèmes, le problème viendra svg ne contient pas la hauteur et la largeur, mais dans mon cas, mon Svg a 100% de hauteur et de largeur et le div imbriqué contient également une balise svg et un canevas existant imbriqué également, je peux exporter ma page en tant qu'image png mais l'image ne contient que les icônes svg plantées et le canevas existant ne rendant pas non plus le rendu. Et encore une chose une fois l'exportation terminée mon autre page svg tous sont affichés comme des images écrasées.pour votre référence, j'ai joint ma capture d'écran ici s'il vous plaît jeter un oeil une fois et laissez-moi savoir merci
html2canvas (this.screen.nativeElement, {useCORS: true}). then (canvas => {
this.canvas.nativeElement.src = canvas.toDataURL ('image / png');
this.downloadLink.nativeElement.href = canvas.toDataURL ('image / png');
this.downloadLink.nativeElement.download = 'screenshot.png';
this.downloadLink.nativeElement.click ();
});

testpdf (1) .pdf
Salut,
J'obtiens l'axe mais le reste de la zone du graphique est noir. Toute suggestion

Salut @niklasvh Agréable de voir votre bibliothèque javascript html2canvas, c'est une bibliothèque géniale, mais je suis toujours confronté au même problème pour rendre le svg dans la création de canevas en utilisant la version npm "1.0.0-alpha.12
"ainsi que la version" 1.0.0-rc.1 "également dans notre application anguar6, selon votre réponse de la liste des problèmes, le problème viendra svg ne contient pas la hauteur et la largeur, mais dans mon cas, mon Svg a 100% de hauteur et de largeur et le div imbriqué contient également une balise svg et un canevas existant imbriqué également, je peux exporter ma page en tant qu'image png mais l'image ne contient que les icônes svg plantées et le canevas existant ne rendant pas non plus le rendu. Et encore une chose une fois l'exportation terminée mon autre page svg tous sont affichés comme des images écrasées.pour votre référence, j'ai joint ma capture d'écran ici s'il vous plaît jeter un oeil une fois et laissez-moi savoir merci
html2canvas (this.screen.nativeElement, {useCORS: true}). then (canvas => {
this.canvas.nativeElement.src = canvas.toDataURL ('image / png');
this.downloadLink.nativeElement.href = canvas.toDataURL ('image / png');
this.downloadLink.nativeElement.download = 'screenshot.png';
this.downloadLink.nativeElement.click ();
});

le même problème, erreur lors de la recherche du svg dans le document cloné

Avant d'utiliser html2canvas, je règle temporairement la hauteur et la largeur des SVG. De cette façon, je suis capable de capturer le svg.

var selectedItem = document.querySelector (". chartWrapper");
var svgElements = selectedItem.querySelectorAll ('svg');
pour (soit i = 0; i <svgElements.length; i ++) {
selectedItem.getElementsByTagName ("svg") [i] .style.height = document.getElementsByTagName ("svg") [i] .getBoundingClientRect (). height;
selectedItem.getElementsByTagName ("svg") [i] .style.width = document.getElementsByTagName ("svg") [i] .getBoundingClientRect (). width;
}
html2canvas (selectedItem, {backgroundColor: '# 000', allowTaint: true}). then (canvas => {
var myImage = canvas.toDataURL ("image / png"). replace ("image / png", "image / octet-stream");
window.location.href = monImage;
})
pour (soit 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);
  }
}