Html2canvas: 'SVGElement.offsetWidth' को हटा दिया गया है और अप्रैल 2016 के आसपास M50 में हटा दिया जाएगा

को निर्मित 9 अप्रैल 2016 · 26टिप्पणियाँ · स्रोत: niklasvh/html2canvas

Google ने SVG के लिए "offsetWidth" का समर्थन करने से इनकार कर दिया है।
विचार हैं?

डॉक्टर: https://www.chromestatus.com/features/5724912467574784

स्रोत

alex-wdmg

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

मैंने इसे हल कर लिया है ... मैं सप्ताह के अंत में समाधान जोड़ूंगा यदि मैं
समय है। देरी के लिए खेद है... यह FF, Safari और Chrome पर काम कर रहा है।
श्रेष्ठ।
बुध, 29 जून 2016 को 19:00 बजे, युकी के नोटिफिकेशन @github.com ने लिखा:

@Dayjo https://github.com/Dayjo हां, मैंने इस पर भी गौर किया है। एसवीजी हैं
पूरी तरह से गलत स्थिति में हैं और अब लगभग हमेशा स्क्रीन से दूर हैं
सभी ऑफ़सेट* अपरिभाषित का मूल्यांकन करते हैं। मैंने भी हल करने में हाथ आजमाया
यह रिकर्सिव getBoundingClientRect का उपयोग कर रहा है - लेकिन कोई भाग्य नहीं :( मैं एक लूंगा
अपनी शाखा को देखो।
-
आप इसे प्राप्त कर रहे हैं क्योंकि आपका उल्लेख किया गया था।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/niklasvh/html2canvas/issues/846#issuecomment -229420457,
या थ्रेड को म्यूट करें
https://github.com/notifications/unsubscribe/ABWsecUQ2l-rxisMZ4HCKu1nh-mbIMU1ks5qQqSQgaJpZM4IDr12
.

chemitaxis 29 जून 2016

🎉3

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

इसे उठाने ही वाला था! थोड़ा चिंतित कुछ इस महीने काम करना बंद कर देगा।

Dayjo 12 अप्रैल 2016

हां, जाहिर तौर पर ओपेरा 37 बीटा काम नहीं करता है। इसके अलावा, पृष्ठभूमि और सीमाओं को प्रदर्शित करने के लिए प्लग-इन समस्याओं का नवीनतम संस्करण। मेरे पास एक है, वे जाँच नहीं करते?

डेमो में भी, बैकग्राउंड और बॉर्डर नहीं दिखते ((

alex-wdmg 12 अप्रैल 2016

यह एक बड़ी समस्या है क्योंकि हमारे एसवीजी अब प्रस्तुत नहीं करेंगे।

इस समारोह के भीतर सबसे बड़ा अपराधी है:

function offsetBounds(node) {
    var parent = node.offsetParent ? offsetBounds(node.offsetParent) : {top: 0, left: 0};

    return {
        top: node.offsetTop + parent.top,
        bottom: node.offsetTop + node.offsetHeight + parent.top,
        right: node.offsetLeft + parent.left + node.offsetWidth,
        left: node.offsetLeft + parent.left,
        width: node.offsetWidth,
        height: node.offsetHeight
    };
}

lines 1887 - 1898 html2canvas.js . में

सभी offsetTop, offsetLeft, offsetWidth, offsetHeight अब SVGs के लिए अपरिभाषित हैं

अनुशंसित समाधान getBoundingClientRect() , लेकिन फिर भी यह काम नहीं कर रहा है।

क्या किसी के पास भी इस बात समाधान है?

MarcBalaban 19 अप्रैल 2016

@MarcBalaban मैंने अभी तक इसकी कोशिश नहीं की है, लेकिन क्या यह उस समारोह में वापसी के ऊपर इसे जोड़ नहीं पाएगा;

if ( node.tagName === 'SVG' ) {
    return node.getBoundingClientRect();
  }

Dayjo 19 अप्रैल 2016

@Dayjo दुर्भाग्य से नहीं, यह निश्चित रूप से सही रास्ते पर है, लेकिन यह लाइन

var parent = node.offsetParent ? offsetBounds(node.offsetParent) : {top: 0, left: 0};

या तो ठीक से निष्पादित नहीं होता है या तो ऑफसेटपैरेंट को भी मूल्यह्रास किया गया है:

MarcBalaban 19 अप्रैल 2016

हम्म हाँ, इसमें कुछ और देखते हुए, इसे यहां getBoundingBoxInArbitrarySpace फ़ंक्शन जैसे कुछ उपयोग करने की आवश्यकता हो सकती है; https://svn.apache.org/repos/asf/commons/sandbox/gsoc/2010/scxml-js/trunk/src/javascript/scxml/cgf/util/svg.js http://stackoverflow.com के अनुसार

हालांकि अभी तक किसी भी तरह की टेस्टिंग करने का मौका नहीं मिला था।

Dayjo 20 अप्रैल 2016

इस मुद्दे के बारे में कोई खबर? धन्यवाद!

chemitaxis 19 मई 2016

@chemitaxis - चेतावनी के बावजूद, अब तक मुझे html2canvas के परिणाम में कोई समस्या नहीं हुई है। हालांकि, कौन जानता है कि यह परिवर्तन वास्तव में क्रोम में कब / कब लागू किया जाएगा?

Dayjo 7 जून 2016

ऐसा लगता है कि इसने अब क्रोम काम करना बंद कर दिया है। ऐसा लगता है कि एसवीजी या तो बिल्कुल गलत तरीके से प्रस्तुत नहीं किए गए हैं, या गलत पैमाने पर/कैनवास में स्थिति में हैं।

@niklasvh - इस पर कोई विचार? अगर मेरे पास समय होता तो मैं खुशी-खुशी एक फिक्स पर बैश कर लेता लेकिन इस समय मैं चोका हूं।

Dayjo 28 जून 2016

मैंने https://svn.apache.org/repos/asf/commons/sandbox/gsoc/2010/scxml-js/trunk/src/javascript/scxml/cgf/util/svg.js का उपयोग करके इस पर एक शॉट लगाया था।

लेकिन यह सुनिश्चित नहीं था कि मुझे इसे लागू करने की आवश्यकता कहां है, मैंने offsetBounds और getBounds फ़ंक्शन दोनों में प्रयास किया लेकिन कोई फायदा नहीं हुआ। एक्स और वाई कॉर्ड सही प्रतीत होते हैं, लेकिन चौड़ाई और ऊंचाई सभी गलत हैं, यह सुनिश्चित नहीं है कि ऐसा इसलिए है क्योंकि मैं एसवीजी को कंटेनर की 100% चौड़ाई और ऑटो ऊंचाई बनाने के लिए सीएसएस का उपयोग कर रहा हूं। कुछ और व्यापक परीक्षण करने की आवश्यकता होगी।

मेरे पास नवीनतम बीटा प्रतिबद्धता का उपयोग करके यहां एक प्रारंभिक शाखा चल रही है (https://github.com/Dayjo/html2canvas/tree/issue-846)। अगर कोई परीक्षण करना चाहता है, तो dist संस्करण का उपयोग करने में सक्षम होना चाहिए, या यदि आप चाहें तो बस पुनर्निर्माण करें। पता नहीं कितना अच्छा / अगर यह काम करेगा।

Dayjo 28 जून 2016

@Dayjo हाँ, मैंने यह भी देखा है। एसवीजी पूरी तरह से गलत स्थिति में हैं और अब लगभग हमेशा स्क्रीन से दूर होते हैं क्योंकि सभी ऑफसेट * का मूल्यांकन अपरिभाषित होता है। मैंने रिकर्सिव getBoundingClientRect का उपयोग करके इसे हल करने में भी अपना हाथ आजमाया - लेकिन कोई भाग्य नहीं :( मैं आपकी शाखा पर एक नज़र डालेगा।

sumigoma 29 जून 2016

@Dayjo https://github.com/Dayjo हां, मैंने इस पर भी गौर किया है। एसवीजी हैं
पूरी तरह से गलत स्थिति में हैं और अब लगभग हमेशा स्क्रीन से दूर हैं
सभी ऑफ़सेट* अपरिभाषित का मूल्यांकन करते हैं। मैंने भी हल करने में हाथ आजमाया
यह रिकर्सिव getBoundingClientRect का उपयोग कर रहा है - लेकिन कोई भाग्य नहीं :( मैं एक लूंगा
अपनी शाखा को देखो।
-
आप इसे प्राप्त कर रहे हैं क्योंकि आपका उल्लेख किया गया था।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/niklasvh/html2canvas/issues/846#issuecomment -229420457,
या थ्रेड को म्यूट करें
https://github.com/notifications/unsubscribe/ABWsecUQ2l-rxisMZ4HCKu1nh-mbIMU1ks5qQqSQgaJpZM4IDr12
.

chemitaxis 29 जून 2016

🎉3

@chemitaxis बहुत बढ़िया! फिक्स के लिए तत्पर हैं।

sumigoma 29 जून 2016

अरे @chemitaxis , यदि आपके पास समय हो तो क्या आप पीआर बना सकते हैं या अपने कांटे से लिंक कर सकते हैं?

sumigoma 7 जुल॰ 2016

👍1

@chemitaxis इस पर कोई प्रगति? मैं एक परियोजना पर कोड का परीक्षण करने की उम्मीद कर रहा हूं जो मैं यह देखने के लिए कर रहा हूं कि यह मेरी सभी एसवीजी समस्याओं को विशेष रूप से आईई के साथ हल करता है या नहीं।

atdiff 21 जुल॰ 2016

हाय @atdiff :) मैंने अन्य पुस्तकालयों का उपयोग करके समस्या हल कर ली है ...

यह ठीक नहीं है, लेकिन मुझे एक छोटा सा समाधान मिला। मैं क्रोम में ठीक से प्रदर्शित करने के लिए एसवीजी भी नहीं प्राप्त कर सका लेकिन यह सफारी में प्रदर्शित होगा। मैंने केवल एसवीजी इनलाइन तत्व में चौड़ाई विशेषता जोड़ दी थी। यहां तक कि एक गलत चौड़ाई विशेषता के साथ इसे क्रोम और सफारी दोनों में प्रिंट किया जाना चाहिए:

    var deferred = $q.defer();

    element.find('svg').attr('width', '100px');

    html2canvas(element, {
        background: '#eee',
        onrendered: function(canvas) {
            var a = document.createElement('a');
            a.href = canvas.toDataURL('image/jpeg', 1).replace('image/jpeg', 'image/octet-stream');
            a.download = fileName + '.jpg';
            a.click();
            deferred.resolve();
        }
    });

    return deferred.promise;

संपादित करें: जोड़ने के लिए कुछ जो संबंधित नहीं है, लेकिन अन्य यहां खोज करते समय उपयोगी हो सकते हैं। फ़ायरफ़ॉक्स मेरी उपरोक्त विधि के साथ काम नहीं कर रहा था। मेरे SVG में हेक्स रंगों के लिए # चिह्न थे (उदा: #ccc)। चूंकि ये यूआरएल में आरक्षित वर्ण हैं और फ़ायरफ़ॉक्स इसके बारे में सख्त है, एसवीजी प्रकट नहीं हुआ। मैंने इसके बजाय आरजीबी मूल्यों के साथ प्रतिस्थापित किया और अब फ़ायरफ़ॉक्स सही ढंग से प्रदर्शित होता है।

jgunderson-IAS 20 अक्तू॰ 2016

@ jgunderson-IAS इसके लिए धन्यवाद, मैं इसे एक त्वरित समाधान के रूप में आज़माऊँगा।

मुझे उम्मीद है कि मुझे इस बग को देखने में एक दिन बिताने का मौका मिलेगा, ठीक है, शायद इस पर आधा दिन, फिर आधा दिन जो मैं इसका उपयोग कर रहा हूं, लेकिन मुझे संभावित रूप से लागू करने का मौका देना चाहिए एक वास्तविक समाधान।

@niklasvh सुनिश्चित नहीं है कि आपने इसे बिल्कुल देखा है, या यदि आपके पास कोई सुझाव है कि किसी फिक्स को सर्वोत्तम तरीके से कैसे कार्यान्वित किया जाए (देखें: https://github.com/niklasvh/html2canvas/issues/846#issuecomment-229035694 )

Dayjo 21 अक्तू॰ 2016

@ jgunderson-IAS मैं स्पष्ट रूप से एसवीजी के आकार को निर्धारित कर रहा हूं, और इस हैकी दृष्टिकोण का मतलब यह है कि वे प्रस्तुत हो जाते हैं, ऐसा लगता है कि आकार असंगत है, मैं ऊंचाई और वजन दोनों गुणों को सेट कर रहा हूं और फिर भी वे नियमित रूप से 'स्क्वैश' दिखाई देते हैं '। दुर्भाग्य से मेरे पृष्ठ सीएसएस द्वारा नियंत्रित एसवीजी आकारों पर भरोसा करते हैं और उनके कंटेनर का 100% होने के नाते, इसलिए यह एक कदम पत्थर है, मुझे लगता है कि मुझे आकार की सही गणना करने के लिए पुस्तकालय को फिर से देखना होगा

Dayjo 24 अक्तू॰ 2016

यहां एक उदाहरण दिया गया है कि कैसे svgs अब प्रतिपादन कर रहे हैं कि मैं मूल तत्व चौड़ाई (सभी svgs सीएसएस में 100% चौड़ाई पर सेट हैं) के आधार पर 'ऑनक्लोन' घटना पर चौड़ाई निर्धारित कर रहा हूं, ऊंचाई इसे और भी गड़बड़ कर रही है;

एचटीएमएल

कैनवास

मैं उपयोग कर रहा हूँ;

onclone: function(doc){
    var w,h;
    var svgs = doc.querySelectorAll('svg');
    for ( var s = 0; s < svgs.length; ++s ) {
        w = svgs[s].parentElement.offsetWidth;
        svgs[s].setAttribute('width', w );
    }
}

ऐसा लगता है कि यह वास्तव में svg पर ही निर्भर करता है कि यह अपने पहलू अनुपात को कितनी अच्छी तरह प्रस्तुत करता है। उदाहरण के लिए पहला (पत्ती) svg, अन्य दो की तुलना में बहुत अधिक कुचला जाता है।

Dayjo 24 अक्तू॰ 2016

दुर्भाग्य से मुझे html2canvas का उपयोग छोड़ना पड़ा और इसके बजाय सर्वर-साइड समाधान का उपयोग करना पड़ा ( wkhtmltoimage ) विशेष रूप से क्योंकि यह svgs को सटीक रूप से प्रस्तुत नहीं कर सकता है। मैं इसे getBoundingClientRect या getBBox आदि का उपयोग करके काम पर लाने में असमर्थ था

Dayjo 24 अक्तू॰ 2016

1.0.0 . में फिक्स्ड

niklasvh 12 दिस॰ 2017

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

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

Html2canvas: 'SVGElement.offsetWidth' को हटा दिया गया है और अप्रैल 2016 के आसपास M50 में हटा दिया जाएगा

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

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

एचटीएमएल

कैनवास

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