Html2canvas: SVGをキャプチャする

いいえ、違います。 これはライブラリの障害ではありませんが、ほとんどのブラウザのバグです（最新の安定したFirefox、バージョン12ではこの問題が修正されており、期待どおりに機能する唯一の問題です）。 問題は、SVG画像がキャンバスを汚染し、判読できなくなることです。 デフォルトでは、キャンバスを読みやすくしたいので（たとえば、 toDataUrlを使用する場合）、html2canvasは画像を汚染するコンテンツを無視します。

ただし、SVG画像がキャンバスを汚すことを気にしない場合は、オプションallowTaintをtrueと、インラインSVGを許可するブラウザーでSVGが正しくレンダリングされます。

また、SVGレンダリングがブラウザー間で正しく機能する場合、SVGを使用してHTMLをレンダリングできるため、このライブラリはほとんど廃止されることを指摘したいと思います。 SVGレンダリングが機能するブラウザー（FF12など）でキャンバスレンダリングを大幅に高速化し、ブラウザーがサポートするすべてのCSSプロパティをサポートできるようにするコードをすでにコミットしました。 詳細については、 https：//github.com/niklasvh/html2canvas/blob/master/src/Parse.js#L1227をご覧ください。

こんにちは、
迅速な対応に感謝します。
私はあなたの提案として試しました：以下のようにallowTaintをtrueに設定します（test.jsを変更します）：

setTimeout（function（）{

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

サンプルimages.htmlでSVGを正常にレンダリングします。

ただし、SVGがより複雑な場合は、クロスブラウザーで正しくレンダリングされません。 例：Chromeでチャート（http://www.highcharts.com/demo/）をキャプチャしたい：チャートがインラインSVGとしてレンダリングされる場合、チャートのx軸とy軸をキャプチャするだけです。外部svgファイルからのソースを使用してimgとしてレンダリングしますが、何もキャプチャしません。
Chromeとは異なり、Firefoxでは、チャートがインラインSVGとしてレンダリングされる場合は何もキャプチャされませんが、チャートが外部svgファイルからの画像である場合はチャートを正常にキャプチャできます。 最悪の事態はIE9で、何もキャプチャされません。

この問題を解決するためのアイデアはありますか？

画像としての使用はFF / Chromeで機能するはずです。 試すことができるのは、drawImageを使用した単純なキャンバスレンダリングがSVGで機能するかどうかです。

このために+1。 私はbabyheroと同じユースケースを持っています。レポートツールとして、ハイチャートSVGグラフのスクリーンショットを取得する必要があります。 すべてのハイチャートSVGを個別に取得することは可能かもしれませんが、「スクリーンショットに保存」機能が必要な他の情報とともにビュー内にレンダリングされます。

@ babyhero184 canvg（http://code.google.com/p/canvg/）を使用してハイチャートSVGをその場でPNGに変換し、SVG要素を非表示にして、PNGを表示することにより、html2canvasでこの制限を回避しました。 次に、html2canvasを使用してその場でスクリーンショットを撮り、PNGを非表示にして、ハイチャートSVGを再度表示しました。 これはラウンドアバウトプロセス（SVG->キャンバス-> PNG->キャンバス-> PNG）ですが、私のニーズには対応しています。

@joeyrobert私もhighchartsとhtml2canvasで同じ問題に直面しています。 コードの要点を共有できれば、とても助かります。
前もって感謝します。

@joeyrobert @ Jagdeep1別のオプションは、 Fabric.jsを使用してSVGをキャンバスにレンダリングし、その画像を取得することです。

+1

+1

+1

この問題の解決策はありますか？

@majuansari _SVG_から_Canvas_および_Canvas_から_image_はFirefoxで機能しますが、Chromeではセキュリティロックがあります。

jQueryを使用してグラフ要素をキャプチャしていましたが、HighchartsSVGが適切に解析されていないことがわかりました。 誰かがチャートのjQueryセレクターを渡す場合、SVGが含まれていない可能性があります。

@mbritton try http://code.google.com/p/canvg/（foreignObjectが機能しない）

はい、それが私の解決策でした。

キャプチャ中にsvg要素をcanvgで生成されたcanvas要素に置き換えることで、この問題を解決しました。
これが私のコードです。

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

簡単なメモ：
canvgは正常に機能していると思いますが、SVGをキャンバスに変換するだけの場合は、ここで説明する簡単な手法を使用して、画像にsvgを読み込み、画像のコンテンツを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 ：これはChromeでうまく機能しますが、Firefoxの回避策があります。これにより、context.drawImage（image、0、0）の行にNS_ERROR_NOT_AVAILABLEが生成されます。これは明らかに既知のバグです。IE11ではSecurityErrorがキャンバスに表示されます。画像が同じドメインにあるにもかかわらず、toDataURL（）？ Chrome以外の他のブラウザで実行することができませんでした...

@gifarangwコードは

@sterenはあなたのソリューションに感謝します、それはうまく機能し（最新のchromeとfirefoxでテストされています）、そしてそれは良い追加のライブラリを必要としません。 いくつかの変更を加え、 @ gifarangwのコードと組み合わせて、

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

（https://github.com/desandro/imagesloadedを使用）

こんにちは、 @ Remiremiソリューションが私にとってうまく機能したと言ってください！ svgのHighStocksで作成されたグラフがたくさんあるページがあり、このソリューションはうまく機能しました！ よくやったみんな！

@Remiremi @fbotti 、何らかの理由でimg.onLoadに入らないため、グラフが消えます（キャンバスに置き換えられません）

私はamchartsで働いています。 何か案が？

@guypaskarあなたのsvgはさらにキュレーションされる必要があるかもしれません。 あなたが追加することができます$(image).appendTo('body'); SETING前に、コードにimage.onload 、その後、Firefoxで無効なイメージのアイコンが表示されます、あなたは右>ビュー画像をクリックすると、エラーを見ることができます。

amcharts svgを簡単に試してみたところ、プロパティxmlns="http://www.w3.org/2000/svg" width="1400" height="500"をsvgタグに追加して機能させる必要がありました。 （高さと幅はcssプロパティとして指定されましたが、何らかの理由で取得されませんでした。）

簡単な修正を見つけました。

svg画像に幅と高さがあることを確認してください。

svgは画像のように測定できないため、それ以外の場合は十分な引数がありません。

この問題の誰かが要約できますか？ 元の問題は解決されましたか？ ここに記載されている問題の大部分を引き起こしている可能性のある特定のブラウザーの問題は、2012年以降修正されているようです。ここでのコメントによると、canvgなどの他のライブラリの使用も不要になりましたか？

残りの問題については、＃197および/または＃267でカバーされますか？ これは閉じられますか？

少なくとも一部のブラウザではまだ問題です

0.5はSVGのサポートを追加します

0.5が@niklasvhで出てくるときのプレビューはありますか？

@ IvoPereira ＃421で0.5のステータスをフォローできます

@niklasvhバージョン0.5を使用していますが、SVGはまだレンダリングされません。 それを行う方法の例はありますか？ （それはインラインSVGです）

@nikolang html2canvas.jsとhtml2canvas.svg.js両方を含めましたか？ もしそうなら、あなたはあなたの特定の問題を示すためにjsFiddleまたはjsbinを提供できますか？

私はこれを機能させました。 問題は、html2canvasを実行したときにSVGが完全にレンダリングされなかったことです。

しかし、レンダリングにはまだいくつかの問題があるようです。 例：http：//d3pie.org

これは、そのように見えるはずです：

html2canvasの後は次のようになります。

おっと、それはかなり不気味です。 これを追跡しやすくするために、同じスクリーンショットとデモ付きのjsFiddleへのリンクを使用して別の問題を開くことができますか？ これは、ずっと前に閉じられた元の問題から離れすぎています。 報告してくれてありがとう！

私はそれをしたいのですが、新しいhtml2canvasをjsfiddleに含める方法がわかりません。 使用できる外部リンクはありますか？

@nikolanghttp ： //rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.jsを使用できます。

ありがとう。 そしてSVGバージョン？

同様に： http ：

こんにちは、

SVGは私の側でレンダリングされますが、以下の誰かによって報告されているように、黒く表示されます。 svg要素の「fill」プロパティをカウントする方法はありますか？

@brainra 、私はこのようなものを使用して塗りつぶしを白にします：

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

「CanvasRenderingContext2D」で「drawImage」の実行に失敗しました：提供されたHTMLImageElementは「壊れた」状態です。」

HTMLにsvg要素があると、このエラーが発生します。
また、allowTaintをtrueに設定しました。 誰か助けてくれませんか？

これを再度開く必要があると思います-svg要素はFirefox以外のすべてのブラウザで正しくレンダリングされています。

NS_ERROR_NOT_AVAILABLE：これはFirefoxのバグです： https ：//bugzilla.mozilla.org/show_bug.cgi？id = 700533（AFAICT）問題を強調するテストページがありhttp://phrogz.net/ SVG / svg_to_png.xhtml

回避策/修正をいただければ幸いです。 あるいは、誰かが@mozillaを

これがあなたの解決策です：
http://stackoverflow.com/questions/18271898/html-and-svg-to-canvas-javascript/32457864#32457864

Angularを使用してこれを試しましたが、最終的には汚染されたキャンバスになりました。 生の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私はあなたのコードを使用しましたが、結果は同じで、svgがありません。
オリジナル-https：//s29.postimg.org/5lkprhx93/with_SVG.png
結果-https：//s23.postimg.org/j1otj2por/without_SVG.png

@remiremi ...このスクリプトを使用するときにですか

基本的に、html2canvasを呼び出す直前にSVGに明示的な幅/高さを設定すると、ほとんどの場合が修正されます。
私がしていることは、関心のあるさまざまなSVG要素をループし、.getBoundingClientRect（）を使用してブラウザーで計算された幅/高さを取得し、要素に幅の高さプロパティを設定することです。レンダリングしませんが、ピクセルを使用すると、Booyah

ただし、複数行のスパンとdivのレンダリングにまだ問題があります

こんにちは、みんな、
ソースコードを少し変更することで、この問題（Firefoxでsvgが失われる）を解決します。
まず、SVG要素には、ピクセルの有無に関係なく、height属性とwidth属性が必要です。
次に、ソースコードを次の場所から変更する必要があります。
self.image.src = " data：image / svg + xml 、" +（new XMLSerializer（））。serializeToString（node）;
に：
self.image.src = " data：image / svg + xml 、" + encodeURIComponent（（new XMLSerializer（））。serializeToString（node））;

その後、それをお楽しみください。

DOMのSVG要素でhtml2canvasを呼び出す方法を誰かが知っていますか？

例は素晴らしいでしょう！

+1は、FirefoxでSVG要素のスクリーンショットをキャプチャする際の問題です。

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

ねえ、私はこのソリューションを使用して（jQueryなしで）この問題を解決することができました：
解決

targetElem =document.getElementById（ 'body'）;
ノードToRecover = [];
ノードToRemove = [];

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

私はこれを行っていますが、IE11では空白の画像しか取得していません。 しかし、私はウェブページでキャンバスを見ることができます。 誰かが私がここで間違っていることを私に助けてくれますか？

こんにちは。 これに<image>タグがある場合、svgのレンダリングに問題があります。

サンプル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>

jsfiddleのサンプルhttp://jsfiddle.net/maestro888/fmjywksq/

簡単な修正を見つけました。

svg画像に幅と高さがあることを確認してください。

svgは画像のように測定できないため、それ以外の場合は十分な引数がありません。

これは真実ですが、残念ながらIE11には当てはまりません...

整理してよかったです。
JS Fiddleを確認したところ、画像が表示されています。

よろしく、

バーナードTAベイカー

16:34アレッサンドロCandiniの水、2019年3月27日には[email protected]
書きました：

簡単な修正を見つけました。

svg画像に幅と高さがあることを確認してください。

svgが測定できないため、それ以外の場合は十分な引数がありません
画像のようにできます。

これは真実ですが、残念ながらIE11には当てはまりません...

—
あなたがコメントしたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/niklasvh/html2canvas/issues/95#issuecomment-477242192 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AM7ZzLPsl0WJS7gGI9npSsRxR33FCnN9ks5va52bgaJpZM4AD-Sb
。

私はcanvgの解決策を見つけました、ここでスタックオーバーフローについて報告しました：それはIE11で完全に機能します！

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

すごい

2019年3月28日木曜日、08：49 Alessandro Candini、 notifications @ github.com
書きました：

canvg https://github.com/canvg/canvgで解決策を見つけました、
スタックオーバーフローについてここに報告
https://stackoverflow.com/questions/34042440/using-html2canvas-to-render-a-highcharts-chart-to-pdf-doesnt-work-on-ie-and-fir ：
IE11で完全に動作します！

—
あなたがコメントしたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/niklasvh/html2canvas/issues/95#issuecomment-477503221 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AM7ZzKNy1GOgQU9TVv7PGCi4fJvYSxDVks5vbIIOgaJpZM4AD-Sb
。

こんにちは@ niklasvhhtml2canvas javascriptライブラリを見てうれしいです、それは素晴らしいライブラリです、しかしそれでもnpmバージョン "1.0.0-alpha.12を使用してsvgをキャンバス作成にレンダリングするための同じ問題に直面しています
"と" 1.0.0-rc.1 "バージョンもanguar6アプリケーションにあります。問題リストからの回答によると、問題はsvgに高さと幅が含まれていませんが、私の場合、私のSvgには100％の高さと幅、ネストされたdivにはsvgタグも含まれ、既存のキャンバスもネストされています。ページをpng画像としてエクスポートできますが、画像にはクラッシュしたsvgアイコンのみが含まれ、既存のキャンバスもレンダリングされません。エクスポートが完了すると、もう1つ私の別のページのsvgはすべてクラッシュした画像として表示されています。参考までに、ここにスクリーンショットを添付しました。一度見て、ありがとうございます。
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
こんにちは、
軸を取得していますが、グラフの残りの領域は黒です。 なにか提案を

こんにちは@ niklasvhhtml2canvas javascriptライブラリを見てうれしいです、それは素晴らしいライブラリです、しかしそれでもnpmバージョン "1.0.0-alpha.12を使用してsvgをキャンバス作成にレンダリングするための同じ問題に直面しています
"と" 1.0.0-rc.1 "バージョンもanguar6アプリケーションにあります。問題リストからの回答によると、問題はsvgに高さと幅が含まれていませんが、私の場合、私のSvgには100％の高さと幅、ネストされたdivにはsvgタグも含まれ、既存のキャンバスもネストされています。ページをpng画像としてエクスポートできますが、画像にはクラッシュしたsvgアイコンのみが含まれ、既存のキャンバスもレンダリングされません。エクスポートが完了すると、もう1つ私の別のページのsvgはすべてクラッシュした画像として表示されています。参考までに、ここにスクリーンショットを添付しました。一度見て、ありがとうございます。
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（）;
}）;

同じ問題、複製されたドキュメントでsvgを見つけるエラー

html2canvasを使用する前に、一時的に高さと幅をSVGに設定しています。 このようにして、私はsvgをキャプチャすることができます。

var selectedItem = document.querySelector（ "。chartWrapper"）;
var svgElements = selectedItem.querySelectorAll（ 'svg'）;
for（let 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;
}）
for（let 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);
  }
}