Html2canvas: एसवीजी ओवरलैप में टेक्स्ट टैग (डुप्लिकेट / डबलिंग)

को निर्मित 19 फ़र॰ 2015 · 24टिप्पणियाँ · स्रोत: niklasvh/html2canvas

(क्षमा करें, मैं अंग्रेजी में अच्छा नहीं हूँ)

नमस्ते,
मैं एसवीजी टैग प्रस्तुत करने के लिए इस भयानक स्क्रिप्ट का उपयोग कर रहा हूं
जब मैं एसवीजी में टेक्स्ट टैग को कैनवास में प्रस्तुत करता हूं तो कुछ टेक्स्ट ओवरलैपिंग होता है
टेक्स्ट टैग को टेक्स्ट नोड और एसवीजी के रूप में भी संसाधित किया जाना चाहिए
आप इसे आसानी से परिवर्तन संपत्ति के साथ देख सकते हैं
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

सबसे उपयोगी टिप्पणी

@ह्योजिन
आईई पर इसका परीक्षण करने के बाद, आपका फिक्स काम नहीं करता है क्योंकि parentElement संपत्ति वर्तमान नोड पर पॉप्युलेट नहीं होती है। इसके बजाय parentNode उपयोग करें! किसी भी मामले में, यह अधिक स्पष्ट होगा क्योंकि हम NodeParser और यह नोड के बारे में बात करता है।

अन्यथा, टैग नाम पर परीक्षण करने के बजाय, मैं parentNode के उदाहरण का परीक्षण करने के लिए अपना कोड बदलता हूं और वर्तमान नोड को संसाधित करने के लिए केवल TextContainer होता है यदि पैरेंट नोड SVGElement .

यह क्रोम और यानी 11 पर काम करता है। फ़ायरफ़ॉक्स पर मैं रिक्त कैनवास बग के कारण इसका परीक्षण नहीं कर सकता!

मेरा कोड

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 6 अग॰ 2015

❤2

सभी 24 टिप्पणियाँ

धन्यवाद#ह्योजिन। इससे मुझे मदद मिलती है।

josnabattula 17 मार्च 2015

धन्यवाद, मेरी बहुत मदद करो!

natee 23 जुल॰ 2015

आपके फिक्स के लिए धन्यवाद!

आप tspan टैगनाम पर भी देख सकते हैं:
node.nodeType === Node.TEXT_NODE && node.parentElement.tagName !== "text" && node.parentElement.tagName !== "tspan"

ncoquelet 4 अग॰ 2015

👍1

@ncoquelet मैंने अपना कोड अपडेट किया। धन्यवाद!

hyojin 5 अग॰ 2015

मेरा कोड

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 6 अग॰ 2015

❤2

मेरी फ़ायरफ़ॉक्स समस्या को ठीक करें, एफएफ पर भी काम करता है :-)

ncoquelet 6 अग॰ 2015

अधिक स्पष्ट!
मैंने यह भी जांचा कि यह ff पर अच्छा काम करता है।
मैंने आपका फिक्स विलय कर दिया और पुल अनुरोध अपडेट किया गया। धन्यवाद :)

hyojin 12 अग॰ 2015

👍1

@hyojin @ncoquelet इस और फिक्स की जांच के लिए धन्यवाद। मैं दूसरे दिन ठीक उसी समस्या में भाग गया और मुझे पूरी तरह से यकीन नहीं था कि इसका क्या कारण था।

berendberendsen 17 जुल॰ 2016

😄1

मुझे यकीन नहीं है कि मैं यहां कहां भ्रमित हो रहा हूं लेकिन मुझे अपवाद मिल रहा है क्योंकि "अनकॉट रेफरेंस एरर: नोडपार्सर परिभाषित नहीं है"

Suchetana10 2 अग॰ 2016

@ सुचेतना10 आपको अपवाद कब मिला? स्क्रिप्ट लोड करने में?

hyojin 5 अग॰ 2016

@hyojin धन्यवाद .. मेरे लिए काम किया

vishwasvadavi 25 अक्तू॰ 2016

@ ह्योजिन धन्यवाद! मेरे लिए भी पूरी तरह से काम करता है

nugen 13 फ़र॰ 2017

Happyvishwasvadavi ugnugen मुझे यह सुनकर खुशी हुई! :)

hyojin 14 फ़र॰ 2017

कुछ लोगों को अभी भी टेक्स्ट तत्व के साथ समस्या है, मैं इस मुद्दे को खोलता हूं और मैं फिर से पीआर भेजूंगा।

hyojin 14 फ़र॰ 2017

seemasingh123 25 फ़र॰ 2017

क्या किसी के पास इस फिक्स के साथ पुस्तकालय का निर्माण है जिसमें मैं परीक्षण कर सकता हूं? हाईचार्ट्स पेज पर एक ही समस्या देख रहे हैं ..

theinventor 24 मार्च 2017

क्या यह बिल्ड फिक्स के साथ उपलब्ध है? मैं अभी भी हाईचार्ट्स के साथ इस मुद्दे का सामना कर रहा हूं।

Nywlem11 2 अग॰ 2017

क्या यह फिक्स बिल्ड में उपलब्ध है या हमें ओवरराइड बनाना है?

sgsmittal 12 अक्तू॰ 2017

क्या यह अभी भी v1.0.0 के साथ कोई समस्या है? यदि हां, तो क्या आप कृपया jsfiddle पर एक उदाहरण साझा कर सकते हैं।

niklasvh 12 दिस॰ 2017

यह समस्या अपने आप बंद कर दी गई है क्योंकि मूल लेखक की ओर से अधिक जानकारी के लिए हमारे अनुरोध का कोई जवाब नहीं मिला है। केवल उस जानकारी के साथ जो वर्तमान में समस्या में है, हमारे पास कार्रवाई करने के लिए पर्याप्त जानकारी नहीं है। यदि आपके पास है तो कृपया संपर्क करें या हमारे लिए आवश्यक उत्तर खोजें ताकि हम आगे की जांच कर सकें।

no-response[bot] 12 दिस॰ 2017

प्रिय @niklasvh ,

इस अद्भुत पुस्तकालय के लिए धन्यवाद। मैं इस मुद्दे को नवीनतम संस्करण - v1.0.0-rc.3 के साथ पुन: पेश करने में सक्षम हूं

मैंने यहां कोडपेन (केवल क्रोम) पर एक उदाहरण बनाया है जहां आप देखेंगे कि कुछ टेक्स्ट नोड्स (ग्राफ शीर्षक में) डुप्लीकेट हैं।

प्रजनन के चरण -

कृपया कोडपेन लिंक खोलें - https://codepen.io/karannagupta/pen/RXpddB केवल क्रोम में
कॉपी टू क्लिपबोर्ड बटन पर क्लिक करें
एनिमेशन समाप्त होने तक प्रतीक्षा करें (या कॉपी किए गए संदेश के लिए कंसोल देखें)
ग्राफ़ को पेंट या दस्तावेज़ में चिपकाएँ (ctrl + v)

रेखा#193 . पर ग्राफ़ शीर्षक जोड़े गए हैं

@hyojin , क्या आप कृपया इस मुद्दे को फिर से खोलेंगे?

सादर,
करण

karannagupta 10 सित॰ 2019

नमस्ते @karannagupta
क्या आप मेरी शाखा को यह जांचने की कोशिश कर सकते हैं कि क्या यह उसी कारण से आता है?

hyojin 11 सित॰ 2019

नमस्ते @hyojin

पुस्तकालय के आपके संस्करण के साथ (v0.5.0-alpha2) यह काम नहीं करता है। आप यहां मेरी पेन पर अपनी हैं

साथ ही, मैं html2canvas के नवीनतम संस्करण का उपयोग करना चाहूंगा। मुझे तब html2canvas.svg का उपयोग करने की भी आवश्यकता नहीं है।

सादर,
करण

karannagupta 11 सित॰ 2019

पता चला कि यह यूनिकोड फोंट के साथ एक समस्या है

karannagupta 11 सित॰ 2019

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Html2canvas: एसवीजी ओवरलैप में टेक्स्ट टैग (डुप्लिकेट / डबलिंग)

सबसे उपयोगी टिप्पणी

सभी 24 टिप्पणियाँ

संबंधित मुद्दों