Html2canvas: SVG erfassen

Nein, tut es nicht. Es ist kein Fehler in der Bibliothek, aber ein Fehler in den meisten Browsern (der neueste stabile Firefox, Version 12, hat dieses Problem behoben und ist der einzige, bei dem es wie erwartet funktioniert). Das Problem ist, dass jedes SVG-Bild die Leinwand verschmutzt und unlesbar macht. Standardmäßig ignoriert html2canvas Inhalte, die das Bild verunreinigen, da die Leinwand lesbar bleiben soll (z. B. wenn Sie toDataUrl möchten).

Wenn es Ihnen jedoch egal ist, dass SVG-Bilder die Leinwand beschädigen, können Sie die Option allowTaint auf true und SVGs sollten für Browser, die Inline-SVG zulassen, korrekt gerendert werden.

Ich möchte auch darauf hinweisen, dass diese Bibliothek fast veraltet wäre, wenn das SVG-Rendering browserübergreifend korrekt funktionieren würde, da SVGs zum Rendern von HTML verwendet werden können. Ich habe bereits Code festgeschrieben, der das Canvas-Rendering in Browsern, in denen SVG-Rendering funktioniert (z. B. FF12), erheblich beschleunigt und die Unterstützung aller vom Browser unterstützten CSS-Eigenschaften ermöglicht. Weitere Informationen finden Sie unter https://github.com/niklasvh/html2canvas/blob/master/src/Parse.js#L1227

Hallo,
Vielen Dank für Ihre schnelle Antwort.
Ich habe es als Ihre Vorschläge versucht: Setzen Sie allowTaint wie folgt auf true (ändern Sie test.js):

setTimeout (function () {

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

Es wird SVG in Beispiel images.html erfolgreich gerendert.

Falls die SVG jedoch komplizierter ist, wird sie im Cross-Browser nicht korrekt gerendert. Beispiel: Ich möchte das Diagramm (http://www.highcharts.com/demo/) in Chrome erfassen: Es erfasst nur die x- und y-Achse des Diagramms, wenn das Diagramm im Falldiagramm als Inline-SVG gerendert wird Als img mit Quelle aus einer externen SVG-Datei rendern, erfasst es nichts.
Im Gegensatz zu Chrome erfasst es in Firefox beim Rendern von Diagrammen als Inline-SVG nichts, kann jedoch Diagramme erfolgreich erfassen, wenn das Diagramm ein Bild aus einer externen SVG-Datei ist. Das Schlimmste ist in IE9, nichts wird erfasst.

Haben Sie eine Idee, um dieses Problem zu lösen?

Die Verwendung als Image sollte für FF / Chrome funktionieren. Sie können versuchen, ob ein einfaches Canvas-Rendering mit drawImage mit der SVG funktioniert.

+1 dafür. Ich habe den gleichen Anwendungsfall wie Babyhero. Ich muss einen Screenshot von Highcharts-SVG-Diagrammen für ein Berichterstellungstool erstellen. Es ist möglicherweise möglich, alle Highcharts-SVGs einzeln abzurufen, sie werden jedoch in einer Ansicht mit anderen Informationen gerendert, für die wir die Funktion "In Screenshot speichern" haben möchten.

@ babyhero184 Ich habe diese Einschränkung in html2canvas umgangen, indem ich canvg (http://code.google.com/p/canvg/) verwendet habe, um Highcharts-SVGs im laufenden Betrieb in PNGs zu konvertieren, die SVG-Elemente auszublenden und das PNG anzuzeigen. Dann machte ich spontan einen Screenshot mit html2canvas und versteckte dann das PNG und zeigte das Highcharts SVG erneut. Es ist ein Kreisverkehr (SVG -> Leinwand -> PNG -> Leinwand -> PNG), aber es funktioniert für meine Bedürfnisse.

@joeyrobert Ich habe auch das gleiche Problem mit Highcharts und html2canvas. Es ist eine große Hilfe, wenn Sie den Kern Ihres Codes teilen können.
Danke im Voraus.

@joeyrobert @ Jagdeep1 Eine andere Option ist die Verwendung von Fabric.js , um SVG auf Leinwand zu rendern und dann das Bild abzurufen.

+1

+1

+1

eine Lösung für dieses Problem?

@majuansari _SVG_ to _Canvas_ und _Canvas_ to _image_ funktionieren in Firefox, aber in Chrome gibt es eine Sicherheitsverriegelung.

Ich habe jQuery zum Erfassen von Diagrammelementen verwendet und festgestellt, dass das Highcharts-SVG dabei nicht richtig analysiert wurde. Wenn jemand einen jQuery-Selektor eines Diagramms übergibt, enthält dieser möglicherweise nicht die SVG.

@mbritton versuchen Sie http://code.google.com/p/canvg/ (ForeignObject funktioniert nicht)

Ja, das war meine Lösung.

Ich habe dieses Problem gelöst, indem ich svg-Elemente während der Aufnahme durch von canvg generierte Canvas-Elemente ersetzt habe.
Hier ist mein 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');
            });
        }
    });
}

Nur eine schnelle Anmerkung:
Ich bin mir sicher, dass canvg einwandfrei funktioniert, aber wenn Sie SVG einfach in Canvas konvertieren möchten, können Sie die hier beschriebene einfache Technik verwenden, mit der das SVG in ein Bild geladen und der Bildinhalt dann als dataURL abgerufen wird.

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 : Während dies in Chrome

@gifarangw Ihr Code funktioniert gut mit Highcharts. Vielen Dank für Ihren wunderbaren Code. : +1: Ich habe nur den canvas.toBlob-Teil entfernt.

@steren, danke für deine Lösung, sie funktioniert gut (getestet auf neuestem Chrome und Firefox) und benötigt keine zusätzliche Bibliothek, was gut ist. Ich habe ein paar Änderungen vorgenommen und mit dem Code von @gifarangw kombiniert und

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

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

Hallo zusammen, nur um zu sagen, dass die @ Remiremi- Lösung für mich großartig funktioniert hat! Ich habe eine Seite mit vielen Grafiken, die mit HighStocks in SVG erstellt wurden, und diese Lösung hat großartig funktioniert! Gut gemacht Jungs!

@Remiremi @fbotti , Aus irgendeinem Grund komme ich nicht in img.onLoad, daher verschwinden die Grafiken (werden nicht durch die Leinwand ersetzt).

Ich arbeite mit Amcharts. Irgendeine Idee?

@guypaskar Ihr $(image).appendTo('body'); hinzufügen, bevor Sie image.onload festlegen. In Firefox wird dann ein Symbol für das ungültige Bild angezeigt. Sie können mit der rechten Maustaste auf> Bild anzeigen klicken und den Fehler anzeigen.

Ich habe einen kurzen Versuch mit einem Amcharts-SVG gemacht und musste die Eigenschaften xmlns="http://www.w3.org/2000/svg" width="1400" height="500" zum SVG-Tag hinzufügen, damit es funktioniert. (Die Höhe und Breite wurden als CSS-Eigenschaften angegeben, aber aus irgendeinem Grund wurden sie nicht erfasst.)

Ich habe eine einfache Lösung gefunden.

Stellen Sie sicher, dass Ihr SVG-Bild eine Breite und Höhe hat.

Ansonsten gibt es nicht genügend Argumente, da ein SVG nicht wie ein Bild gemessen werden kann.

Kann jemand zu diesem Thema noch einmal zusammenfassen? Ist das ursprüngliche Problem behoben? Es scheint, dass bestimmte Browserprobleme, die möglicherweise die meisten der hier genannten Probleme verursacht haben, seit 2012 behoben wurden. Nach einigen Kommentaren hier ist die Verwendung anderer Bibliotheken wie canvg ebenfalls nicht mehr erforderlich?

Würden die verbleibenden Ausgaben von # 197 und / oder # 267 abgedeckt? Kann dieser geschlossen werden?

Es ist immer noch ein Problem mit zumindest einigen Browsern

0,5 unterstützt SVGs

Gibt es eine Vorschau, wenn 0.5

@IvoPereira Sie können den Status von 0,5 in # 421 verfolgen

@ Niklasvh Ich habe Version 0.5 und SVG rendert immer noch nicht. Gibt es ein Beispiel dafür? (Es ist eine Inline-SVG)

@nikolang hast du sowohl html2canvas.js als auch html2canvas.svg.js ? Wenn ja, können Sie eine jsFiddle oder jsbin bereitstellen, um Ihr spezifisches Problem zu demonstrieren?

Ich habe das zum Laufen gebracht. Das Problem war, dass die SVG nicht vollständig gerendert wurde, als ich html2canvas machte.

Es scheint jedoch immer noch einige Probleme beim Rendern zu geben. Zum Beispiel http://d3pie.org

So soll es aussehen:

So sieht es nach html2canvas aus:

Whoa, das ist ziemlich gruselig. Können Sie eine separate Ausgabe mit denselben Screenshots und einem Link zu nur einer jsFiddle mit der Demo öffnen, damit dies einfacher zu verfolgen ist? Dies entfernt sich zu weit von der ursprünglichen Ausgabe, die vor langer Zeit geschlossen wurde. Vielen Dank für die Meldung!

Ich würde das gerne tun, aber ich weiß nicht, wie ich die neuen html2canvas in jsfiddle aufnehmen soll. Gibt es einen externen Link, den ich verwenden kann?

@nikolang Sie können http://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.js verwenden .

Vielen Dank. Und die SVG-Version?

Ähnlich: http://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.svg.js .

Hallo,

SVGs werden auf meiner Seite gerendert, erscheinen aber schwarz, wie von jemandem unten berichtet. Gibt es eine Möglichkeit, die "fill" -Eigenschaft der svg-Elemente zu zählen?

@brainra , ich benutze so etwas, um die Füllung weiß zu machen:

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

Fehler beim Ausführen von 'drawImage' auf 'CanvasRenderingContext2D': Das bereitgestellte HTMLImageElement befindet sich im Status 'defekt'. "

Ich erhalte diesen Fehler, wenn es in HTML ein svg-Element gibt.
Außerdem habe ich allowTaint auf true gesetzt. Kann mir bitte jemand helfen?

Ich denke, dies sollte wieder geöffnet werden - SVG-Elemente werden in jedem Browser außer Firefox ordnungsgemäß gerendert.

NS_ERROR_NOT_AVAILABLE: Dies ist ein Firefox-Fehler: https://bugzilla.mozilla.org/show_bug.cgi?id=700533 (AFAICT) Es gibt eine Testseite, die das Problem hervorhebt (vom Fehler verlinkt) http://phrogz.net/ SVG / svg_to_png.xhtml

Eine Problemumgehung / Korrektur wäre sehr dankbar. Oder vielleicht könnte jemand jemanden @mozilla stupsen , um das zu

Hier ist Ihre Lösung:
http://stackoverflow.com/questions/18271898/html-and-svg-to-canvas-javascript/32457864#32457864

Ich habe es mit eckigem versucht, aber am Ende habe ich eine verdorbene Leinwand. Ich denke ich brauche das rohe SVG?

<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 Ich habe Ihren Code verwendet, aber das Ergebnis ist das gleiche, SVG fehlt.
Original - https://s29.postimg.org/5lkprhx93/with_SVG.png
Ergebnis - https://s23.postimg.org/j1otj2por/without_SVG.png

@remiremi ... was ist der Plugin-Name, den ich bei der Verwendung dieses Skripts habe

Grundsätzlich behebt das Festlegen einer expliziten Breite / Höhe in der SVG-Datei kurz vor dem Aufruf von html2canvas die meisten Fälle für mich.
Was ich tue, ist, die verschiedenen SVG-Elemente von Interesse zu durchlaufen, ihre vom Browser berechnete Breite / Höhe mit .getBoundingClientRect () abzurufen und die Eigenschaft width height für das Element festzulegen Nicht rendern, aber mit Pixeln, Booyah

Es gibt jedoch immer noch Probleme beim Rendern von mehrzeiligen Spannen und Divs

Hallo Leute,
Ich behebe dieses Problem (verlorene SVG mit Firefox), indem ich den Quellcode ein wenig ändere.
Erstens muss das SVG-Element das Attribut height und width haben, unabhängig davon, ob es sich um Pixel handelt oder nicht.
dann sollten Sie den Quellcode ändern von:
self.image.src = " data: image / svg + xml ," + (neuer XMLSerializer ()). serializeToString (Knoten);
zu:
self.image.src = " data: image / svg + xml ", + encodeURIComponent ((neuer XMLSerializer ()). serializeToString (Knoten));

dann genieße es.

Hat jemand eine Idee, wie ich html2canvas für ein SVG-Element im DOM aufrufen würde?

Ein Beispiel wäre toll!

+1 immer noch ein Problem beim Erfassen von SVG-Element-Screenshots in Firefox.

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

Hey, ich konnte dieses Problem mit dieser Lösung (ohne jQuery) beheben:
Lösung

let targetElem =document.getElementById ('body');
let nodeToRecover = [];
let nodeToRemove = [];

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

Ich mache das, aber ich bekomme nur ein leeres Bild in IE11. Aber ich kann die Leinwand auf der Webseite sehen. Kann mir bitte jemand helfen, was ich hier falsch mache?

Hallo. Ich habe ein Problem beim Rendern von SVG, wenn dieses <image> -Tag hat.

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

Beispiel in jsfiddle http://jsfiddle.net/maestro888/fmjywksq/

Ich habe eine einfache Lösung gefunden.

Stellen Sie sicher, dass Ihr SVG-Bild eine Breite und Höhe hat.

Ansonsten gibt es nicht genügend Argumente, da ein SVG nicht wie ein Bild gemessen werden kann.

Dies gilt aber leider nicht für IE11 ...

Ich bin froh, dass du es geklärt hast.
Ich habe gerade Ihre JS-Geige überprüft und sie zeigt das Bild an.

Grüße,

Bernard TA Baker

Am Mittwoch, den 27. März 2019 um 16:34 Uhr Alessandro Candini [email protected]
schrieb:

Ich habe eine einfache Lösung gefunden.

Stellen Sie sicher, dass Ihr SVG-Bild eine Breite und Höhe hat.

Ansonsten gibt es nicht genügend Argumente, da ein SVG nicht gemessen werden kann
wie ein Bild kann.

Dies gilt aber leider nicht für IE11 ...

- -
Sie erhalten dies, weil Sie kommentiert haben.
Antworte direkt auf diese E-Mail und sieh sie dir auf GitHub an
https://github.com/niklasvh/html2canvas/issues/95#issuecomment-477242192 ,
oder schalten Sie den Thread stumm
https://github.com/notifications/unsubscribe-auth/AM7ZzLPsl0WJS7gGI9npSsRxR33FCnN9ks5va52bgaJpZM4AD-Sb
.

Ich habe eine Lösung mit canvg gefunden , die hier über den Stapelüberlauf berichtet wird: Sie funktioniert perfekt unter IE11!

Mein überarbeitetes Snippet, das die jQuery-Abhängigkeit entfernt:

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

Groß

Am Do, 28. März 2019, 08:49 Uhr Alessandro Candini, [email protected]
schrieb:

Ich habe eine Lösung mit canvg gefunden. Https://github.com/canvg/canvg ,
hier über Stapelüberlauf gemeldet
https://stackoverflow.com/questions/34042440/using-html2canvas-to-render-a-highcharts-chart-to-pdf-doesnt-work-on-ie-and-fir :
es funktioniert perfekt auf IE11!

- -
Sie erhalten dies, weil Sie kommentiert haben.
Antworte direkt auf diese E-Mail und sieh sie dir auf GitHub an
https://github.com/niklasvh/html2canvas/issues/95#issuecomment-477503221 ,
oder schalten Sie den Thread stumm
https://github.com/notifications/unsubscribe-auth/AM7ZzKNy1GOgQU9TVv7PGCi4fJvYSxDVks5vbIIOgaJpZM4AD-Sb
.

Hi @niklasvh Schön, Ihre html2canvas-Javascript-Bibliothek zu sehen. Es ist eine großartige Bibliothek, aber ich habe immer noch das gleiche Problem beim Rendern des SVG in die Canvas-Erstellung mit der npm-Version "1.0.0-alpha.12"
"sowie" 1.0.0-rc.1 "-Version auch in unserer anguar6-Anwendung. Gemäß Ihrer Antwort aus der Problemliste wird das Problem kommen. svg enthält nicht die Höhe und Breite, aber in meinem Fall hat mein Svg 100% Höhe und Breite und verschachteltes div enthält auch svg-Tag und verschachtelte vorhandene Zeichenfläche. Ich kann meine Seite als PNG-Bild exportieren, aber das Bild enthält nur die abgestürzten SVG-Symbole und vorhandene Zeichenfläche, die ebenfalls nicht gerendert werden. Und noch etwas, sobald der Export abgeschlossen ist Meine andere Seite svg alle werden als abgestürzte Bilder angezeigt. Als Referenz habe ich meinen Screenshot hier angehängt. Bitte schauen Sie einmal und lassen Sie mich wissen, danke.
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 = 'screenhot.png';
this.downloadLink.nativeElement.click ();
});

testpdf (1) .pdf
Hallo,
Ich erhalte die Achse, aber der Rest des Diagrammbereichs ist schwarz. Irgendein Vorschlag

Hi @niklasvh Schön, Ihre html2canvas-Javascript-Bibliothek zu sehen. Es ist eine großartige Bibliothek, aber ich habe immer noch das gleiche Problem beim Rendern des SVG in die Canvas-Erstellung mit der npm-Version "1.0.0-alpha.12"
"sowie" 1.0.0-rc.1 "-Version auch in unserer anguar6-Anwendung. Gemäß Ihrer Antwort aus der Problemliste wird das Problem kommen. svg enthält nicht die Höhe und Breite, aber in meinem Fall hat mein Svg 100% Höhe und Breite und verschachteltes div enthält auch svg-Tag und verschachtelte vorhandene Zeichenfläche. Ich kann meine Seite als PNG-Bild exportieren, aber das Bild enthält nur die abgestürzten SVG-Symbole und vorhandene Zeichenfläche, die ebenfalls nicht gerendert werden. Und noch etwas, sobald der Export abgeschlossen ist Meine andere Seite svg alle werden als abgestürzte Bilder angezeigt. Als Referenz habe ich meinen Screenshot hier angehängt. Bitte schauen Sie einmal und lassen Sie mich wissen, danke.
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 = 'screenhot.png';
this.downloadLink.nativeElement.click ();
});

das gleiche Problem, Fehler beim Finden der SVG im geklonten Dokument

Bevor ich html2canvas benutze, stelle ich vorübergehend Höhe und Breite für die SVGs ein. Auf diese Weise kann ich das SVG erfassen.

var selectedItem = document.querySelector (". chartWrapper");
var svgElements = selectedItem.querySelectorAll ('svg');
für (sei 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 = myImage;
})
für (sei 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);
  }
}