Html2canvas: SVG 겹침의 텍스트 태그(중복/이중)

에 만든 2015년 02월 19일 · 24코멘트 · 출처: niklasvh/html2canvas

(미안, 나는 영어를 잘 못해)

안녕하십니까,
이 멋진 스크립트를 사용하여 SVG 태그를 렌더링하고 있습니다.
SVG의 텍스트 태그를 캔버스로 렌더링할 때 일부 텍스트가 겹칩니다.
텍스트 태그는 텍스트 노드 및 SVG로 처리됩니다.
transform 속성을 사용하면 쉽게 확인할 수 있습니다.
2015-02-19 15 08 29_2
다음은 샘플 코드입니다(html2canvas 0.5.0-alpha2 포함)

<html>
<head>
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="js/html2canvas.js"></script>
</head>
<body>
  <svg width="100" height="100">
    <g transform="translate(20,20)">
      <text dy=".45em" y="10" x="0" dx="-.8em" transform="translate(0,0) rotate(-70)" style="font-size:12px;">Text</text>
    </g>
  </svg>
  <script>
    $(document).ready(function() {
      html2canvas(document.body, {
        onrendered: function(canvas) {
          document.body.appendChild(canvas);
        }
      });
    })
  </script>
</body>
</html

그리고 여기 내 빠른 변경 사항이 있습니다.

NodeParser.prototype.getChildren = function(parentContainer) {
    return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
        var container = [node.nodeType === Node.TEXT_NODE && node.parentElement.tagName !== "text" ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
        return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
    }, this));
};

이것이 도움이 되기를 바랍니다.

Needs More Information

출처

hyojin

👍4 ❤2

가장 유용한 댓글

@효진
IE에서 테스트한 후 parentElement 속성이 현재 노드에 채워지지 않았기 때문에 수정 사항이 작동하지 않습니다. 대신 parentNode 사용하십시오! 어쨌든 우리는 NodeParser 있고 노드에 대해 이야기하기 때문에 더 명확할 것입니다.

그렇지 않으면 태그 이름을 테스트하는 대신 parentNode 의 인스턴스를 테스트하도록 코드를 변경하고 parentNode가 SVGElement 가 아닌 경우에만 현재 노드에 TextContainer 있음을 처리합니다. .

그것은 크롬과 ie11에서 작동합니다. 파이어폭스에서는 빈 캔버스 버그 때문에 테스트할 수 없습니다!

내 코드

NodeParser.prototype.getChildren = function(parentContainer) {
    return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
        var container = [node.nodeType === Node.TEXT_NODE && !(node.parentNode instanceof SVGElement) ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
        return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
    }, this));
};

이게 도움이 되길 바란다.

ncoquelet 에 2015년 08월 06일

❤2

모든 24 댓글

#효진님 감사합니다. 그게 나에게 도움이 된다.

josnabattula 에 2015년 03월 17일

감사합니다, 많이 도와주세요!

natee 에 2015년 07월 23일

수정해주셔서 감사합니다!

tspan tagName을 확인할 수도 있습니다.
node.nodeType === Node.TEXT_NODE && node.parentElement.tagName !== "텍스트" && node.parentElement.tagName !== "tspan"

ncoquelet 에 2015년 08월 04일

👍1

@ncoquelet 내 코드를 업데이트했습니다. 감사 해요!

hyojin 에 2015년 08월 05일

그것은 크롬과 ie11에서 작동합니다. 파이어폭스에서는 빈 캔버스 버그 때문에 테스트할 수 없습니다!

내 코드

NodeParser.prototype.getChildren = function(parentContainer) {
    return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
        var container = [node.nodeType === Node.TEXT_NODE && !(node.parentNode instanceof SVGElement) ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
        return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
    }, this));
};

이게 도움이 되길 바란다.

ncoquelet 에 2015년 08월 06일

❤2

내 파이어 폭스 문제를 해결하고 ff에서도 작동합니다 :-)

ncoquelet 에 2015년 08월 06일

더 분명한!
ff에서도 잘 작동하는지 확인했습니다.
수정 사항을 병합했고 pull 요청이 업데이트되었습니다. 감사 해요 :)

hyojin 에 2015년 08월 12일

👍1

@hyojin @ncoquelet 이에 대한 조사와 수정에 감사드립니다. 나는 요전에 똑같은 문제에 부딪쳤고 그 원인이 무엇인지 완전히 확신하지 못했습니다.