Html2canvas: SVG 캡처

아니 그렇지 않아. 라이브러리의 결함은 아니지만 대부분의 브라우저의 버그입니다 (최신 안정적인 Firefox 버전 12에서는이 문제가 수정되었으며 예상대로 작동하는 유일한 문제입니다). 문제는 모든 SVG 이미지가 캔버스를 오염시켜 읽을 수 없다는 것입니다. 기본적으로 html2canvas는 캔버스를 읽기 쉽게 유지하기 위해 이미지를 오염시키는 콘텐츠를 무시합니다 (예 : toDataUrl 를 사용하려는 경우).

그러나, 당신은 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);

example images.html에서 SVG를 성공적으로 렌더링합니다.

그러나 SVG가 더 복잡한 경우 크로스 브라우저에서 올바르게 렌더링되지 않습니다. 예 : Chrome에서 차트 (http://www.highcharts.com/demo/)를 캡처하고 싶습니다. 차트가 인라인 SVG로 렌더링 될 때 차트의 x 축과 y 축만 캡처합니다. extenal svg 파일의 소스를 사용하여 img로 렌더링하면 아무것도 캡처하지 않습니다.
반대로 Chrome은 Firefox에서 차트가 인라인 SVG로 렌더링 될 때 아무것도 캡처하지 않지만 차트가 외부 svg 파일의 이미지 일 때 성공적으로 차트를 캡처 할 수 있습니다. 최악의 경우는 IE9이며 아무것도 캡처되지 않습니다.

이 문제를 해결할 아이디어가 있습니까?

이미지로 사용하면 FF / Chrome에서 작동합니다. 시도해 볼 수있는 것은 drawImage를 사용하는 간단한 캔버스 렌더링이 SVG와 함께 작동하는지 여부입니다.

이것에 대해 +1. babyhero와 동일한 사용 사례가 있습니다.보고 도구를 위해 highcharts SVG 그래프의 스크린 샷을 캡처해야합니다. 모든 하이 차트 SVG를 개별적으로 가져 오는 것이 가능할 수 있지만 "스크린 샷에 저장"기능을 사용하려는 다른 정보가 포함 된 뷰 내에서 렌더링됩니다.

@ babyhero184 canvg (http://code.google.com/p/canvg/)를 사용하여 highcharts SVG를 PNG로 즉시 변환하고 SVG 요소를 숨기고 PNG를 표시하여 html2canvas에서이 제한을 극복했습니다. 그런 다음 html2canvas로 즉석에서 스크린 샷을 찍고 PNG를 숨기고 하이 차트 SVG를 다시 보여주었습니다. 로터리 프로세스 (SVG-> 캔버스-> PNG-> 캔버스-> PNG)이지만 내 필요에 따라 작동합니다.

@joeyrobert 나는 또한 highcharts와 html2canvas에서 같은 문제에 직면하고 있습니다. 코드의 요지를 공유 할 수 있다면 큰 도움이 될 것입니다.
미리 감사드립니다.

@joeyrobert @ Jagdeep1 또 다른 옵션은 Fabric.js 를 사용하여 캔버스에 SVG를 렌더링 한 다음 이미지를 검색하는 것입니다.

+1

+1

+1

이 문제에 대한 해결책이 있습니까?

@majuansari _SVG_ to _Canvas_ 및 _Canvas_ to _image_는 firefox에서 작동하지만 Chrome에는 보안 잠금이 있습니다.

차트 요소를 캡처하기 위해 jQuery를 사용하고 있었는데 그렇게했을 때 Highcharts SVG가 제대로 구문 분석되지 않았 음을 발견했습니다. 누군가 차트의 jQuery 선택기를 전달하는 경우 SVG가 포함되지 않을 수 있습니다.

@mbritton http://code.google.com/p/canvg/ 시도 (foreignObject가 작동하지 않음)

예, 그것이 제 해결책이었습니다.

캡처하는 동안 svg 요소를 canvg 생성 캔버스 요소로 대체하여이 문제를 해결했습니다.
다음은 내 코드입니다.

// 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에 대한 해결 방법이

@gifarangw 코드는 highcharts에서 잘 작동합니다. 멋진 코드에 감사드립니다. : +1 : 내가 제거한 유일한 것은 canvas.toBlob 부분이었습니다.

@steren 솔루션에 감사 드리며 잘 작동하며 (최신 크롬 및 파이어 폭스에서 테스트 됨) 좋은 추가 라이브러리가 필요하지 않습니다. 몇 가지를 변경하고 @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 솔루션이 저에게 잘

@Remiremi @fbotti , 어떤 이유로 든

amcharts와 함께 일하고 있습니다. 어떤 생각?

@guypaskar 귀하의 svg를 추가로 큐레이팅해야 할 수 있습니다. 당신은 추가 할 수 있습니다 $(image).appendTo('body'); 최저치를하기 전에 코드에 image.onload , 다음 파이어 폭스에서 당신이 잘못된 이미지에 대한 아이콘이 표시됩니다, 당신은 바로>보기 이미지를 클릭하고 오류를 볼 수 있습니다.

amcharts svg에 빠르게 시도해 보았고 작동하도록하려면 svg 태그에 xmlns="http://www.w3.org/2000/svg" width="1400" height="500" 속성을 추가해야했습니다. (높이와 너비는 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에 대한 링크 만 열 수 있습니까? 이것은 오래 전에 종결 된 원래 문제에서 너무 멀어지고 있습니다. 신고 해 주셔서 감사합니다!

나는 그것을하고 싶지만 jsfiddle에 새로운 html2canvas를 포함하는 방법을 모릅니다. 사용할 수있는 외부 링크가 있습니까?

@nikolang http://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.js 를 사용할 수

감사. 그리고 SVG 버전?

유사하게 : http://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.svg.js .

안녕하세요,

SVG는 내 쪽에서 렌더링되지만 아래 누군가가보고 한 것처럼 검은 색으로 보입니다. svg 요소의 "채우기"속성을 계산하는 방법이 있습니까?

@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

나는 각도를 사용하여 이것을 시도했지만 오염 된 캔버스로 끝납니다. 원시 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 요소에는 픽셀 여부에 관계없이 높이 및 너비 속성이 있어야합니다.
그런 다음 소스 코드를 다음에서 변경해야합니다.
self.image.src = " data : image / svg + xml ,"+ (새 XMLSerializer ()). serializeToString (node);
에:
self.image.src = " data : image / svg + xml ,"+ encodeURIComponent ((new XMLSerializer ()). serializeToString (node));

다음 그것을 즐기십시오.

누구든지 DOM의 SVG 요소에 대해 html2canvas 를 호출하는 방법에 대한 아이디어가 있습니까?

예가 좋습니다!

+1은 파이어 폭스에서 SVG 요소 스크린 샷을 캡처하는 데 여전히 문제입니다.

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

이 솔루션을 사용하여이 문제를 해결할 수있었습니다 (jQuery없이).
해결책

targetElem =document.getElementById ( 'body');
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);

나는 이것을하고 있지만 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 베이커

2019 년 3 월 27 일 수요일 오후 4:34 Alessandro Candini [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, [email protected]
썼다 :

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
.

안녕하세요 @niklasvh html2canvas 자바 스크립트 라이브러리를
"뿐만 아니라 anguar6 응용 프로그램의"1.0.0-rc.1 "버전도 문제 목록의 응답에 따라 문제가 올 것입니다 svg는 높이와 너비를 포함하지 않지만 제 경우에는 Svg가 100 % 높이와 너비와 중첩 된 div에는 svg 태그도 포함되어 있고 기존 캔버스도 중첩되어 있습니다. 내 페이지를 png 이미지로 내보낼 수 있지만 이미지에는 충돌 된 svg 아이콘 만 포함되어 있고 기존 캔버스도 렌더링되지 않습니다. 내 다른 페이지 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
안녕하세요,
축을 얻고 있지만 차트의 나머지 영역은 검은 색입니다. 어떠한 제안

안녕하세요 @niklasvh html2canvas 자바 스크립트 라이브러리를
"뿐만 아니라 anguar6 응용 프로그램의"1.0.0-rc.1 "버전도 문제 목록의 응답에 따라 문제가 올 것입니다 svg는 높이와 너비를 포함하지 않지만 제 경우에는 Svg가 100 % 높이와 너비와 중첩 된 div에는 svg 태그도 포함되어 있고 기존 캔버스도 중첩되어 있습니다. 내 페이지를 png 이미지로 내보낼 수 있지만 이미지에는 충돌 된 svg 아이콘 만 포함되어 있고 기존 캔버스도 렌더링되지 않습니다. 내 다른 페이지 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);
  }
}