Html2canvas: एसवीजी<img/> बड़े पैमाने पर है

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

कृपया सुनिश्चित करें कि आप html2canvas की नवीनतम
पुराने संस्करण समर्थित नहीं हैं और उनके लिए रिपोर्ट की गई समस्याओं को बंद कर दिया जाएगा।

कृपया पहले सामान्य समस्या निवारण चरणों का पालन करें:

[x] आप नवीनतम संस्करण का उपयोग कर रहे हैं
[x] आप html2canvas के गैर-छोटा संस्करण का उपयोग करके परीक्षण कर रहे हैं और कंसोल में रिपोर्ट की गई किसी भी संभावित समस्या की जाँच कर रहे हैं

दोष रिपोर्ट:

अगर मैं <img src="... .svg"> का उपयोग करता हूं तो एसवीजी सुपर उड़ा हुआ है। ऐसा लगता है कि केवल "उत्तरदायी" svg छवियों के साथ होता है (ऐसी छवियां जहां वास्तविक छवि एन्कोडिंग में कोई ऊंचाई या चौड़ाई निर्धारित नहीं की गई है)। छवि और सामग्री बॉक्स सही आकार के साथ प्रस्तुत किए जाते हैं लेकिन जब कैनवास पर खींचा जाता है, तो छवि व्यूपोर्ट ऊंचाई को अपनाती है।

यहाँ पहेली है: http://jsfiddle.net/1b4mLnfj/2/

screencapture-html2canvas-hertzen-2019-04-10-22_39_56

विशेष विवरण:

html2canvas संस्करण के साथ परीक्षण किया गया: 1.0.0-rc.1 / 1.0.0-rc.0
ब्राउज़र और संस्करण: क्रोम 73 / ओपेरा 58
ऑपरेटिंग सिस्टम: ओएस एक्स

Bug Unverified

स्रोत

I3rendan

👀1 👍1

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

धन्यवाद, मैं इसे देख लूंगा

niklasvh 12 अप्रैल 2019

👍3

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

मैंने एक फिडल संलग्न किया है, जो मुझे आशा है कि यह स्पष्ट करता है: http://jsfiddle.net/1b4mLnfj/2/

I3rendan 11 अप्रैल 2019

धन्यवाद, मैं इसे देख लूंगा

niklasvh 12 अप्रैल 2019

👍3

मैं थोड़ी देर के लिए इसके चारों ओर घूम रहा हूं और ऐसा लगता है कि कंटेनर सीमाओं की गणना सही ढंग से की जा रही है लेकिन वेक्टर छवि स्वयं व्यूपोर्ट के आयामों को अपना रही है। ऐसा लगता है कि सीमाएं और घुमावदार सीमाएं ठीक हैं, इसलिए मुझे नहीं पता कि कहां बदलाव करना है... किसी को भी पहले इस तरह की समस्या का सामना करना पड़ता है?

I3rendan 15 अप्रैल 2019

अधिक जांच के बाद, ऐसा लगता है कि यह केवल svg छवियों के साथ हो रहा है जो "उत्तरदायी" हैं - यदि आप इलस्ट्रेटर में svg खोलते हैं और उत्तरदायी विकल्प की जाँच किए बिना सहेजते हैं, तो यह सही ढंग से आकार देगा ... अनिवार्य रूप से यदि svg नहीं करता है इसमें एक ऊंचाई और चौड़ाई एन्कोडेड है (जिसे इलस्ट्रेटर "उत्तरदायी" कहा जाता है) तो यह व्यूपोर्ट के आयामों को अपनाएगा।

I3rendan 15 अप्रैल 2019

तो एक संभावित समाधान <img> को svg-inject (https://github.com/iconfu/svg-inject) जैसी लाइब्रेरी का उपयोग करके एक सच्चे <svg> से बदलना है - यहां, यदि आप <img> ऊंचाई और चौड़ाई लागू करते हैं, तो इसे इंजेक्ट किए जाने पर <svg> द्वारा अपनाया जाएगा और यह कैनवास पर आकार बदलने से रोकेगा।

इसमें कुछ कमियां हैं (जैसे एन्कोडेड, बेस 64 स्रोत का उपयोग करते समय, या यदि आपके पास एक ही संरचना और इनलाइन क्लास स्टाइल के साथ एकाधिक एसवीजी हैं) लेकिन शायद इससे किसी और को समस्या से जूझने में मदद मिलेगी। मैं इस पर कुछ दिनों से लगातार काम कर रहा हूं और यह मेरे पास अब तक का सबसे अच्छा समाधान है। मुझे वास्तविक html2canvas कोड कुछ भी नहीं मिल रहा है जो कैनवास पर एक svg छवि के आकार को रोक देगा यदि svg में एन्कोडेड ऊंचाई/चौड़ाई मान नहीं है।

I3rendan 16 अप्रैल 2019

तो मैं इस पर तौलिया फेंक रहा हूं लेकिन मैं कैनवास पर एसवीजी को कैसे प्रस्तुत/खींचा गया है, इससे संबंधित समाधान पर उतरा। विशेष रूप से, renderNodeContent यदि हम यह पता लगा सकते हैं कि यह कैसे निर्धारित किया जाए कि कोई छवि एक svg है और वह भी जिसमें एन्कोडेड ऊंचाई/चौड़ाई (उत्तरदायी) नहीं है, तो हम उस svg को उन आयामों के साथ आकर्षित कर सकते हैं जो व्यूपोर्ट से मेल खाते हैं ( चौड़ाई = व्यूपोर्ट। चौड़ाई, ऊंचाई = (छवि। ऊंचाई * व्यूपोर्ट। चौड़ाई)/छवि। चौड़ाई)) तो सैद्धांतिक रूप से यह काम कर सकता है। मुझे यकीन नहीं है कि कैसे निर्धारित किया जाए कि svg छवि उन ऊंचाई और चौड़ाई मानों को याद कर रही है या नहीं।

I3rendan 18 अप्रैल 2019

यहाँ कोई अद्यतन?

HairyRabbit 25 अप्रैल 2019

मुझसे नहीं, मैंने इस मुद्दे पर काम करना बंद कर दिया है, लेकिन उम्मीद है कि ऊपर दी गई टिप्पणियां मददगार हो सकती हैं।

I3rendan 25 अप्रैल 2019

हाय मेरे पास एक ही मुद्दा था।
माई इमेज टैग में style='transition: transform 0.6s;' शैली है। इसके बिना, छवि सही ढंग से प्रस्तुत की गई।

donoli1st 18 नव॰ 2020

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

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