क्या वेब पेज का स्क्रीनशॉट एसवीजी इमेज के रूप में लेना संभव है?


31

मेरे पास एक वेबपेज है जो पूरी तरह से वेक्टर-आधारित (टेक्स्ट, आइकन फोंट, एसवीजी, लेकिन कोई पीएनजी, जेपीईजी, या जीआईएफ) नहीं है।

क्या उस वेबपृष्ठ का वेक्टर स्क्रीनशॉट लेने और इसे पूरी तरह से स्केलेबल SVG फ़ाइल के रूप में सहेजने का कोई तरीका है?
(ताकि मैं एक सामान्य पीसी पर स्क्रीनशॉट ले सकूं और यह रेटिना पर अच्छा लगे)

यह संभव होना चाहिए, लेकिन मुझे ऐसा कुछ भी नहीं मिल रहा है जो यह करेगा।

अतिरिक्त क्रेडिट: यदि इसमें कुछ बिटमैप चित्र हैं, तो मुझे एम्बेडेड बिटमैप के साथ एक एसवीजी चाहिए।


ऐसा लगता है कि html2canvas.hertzen.com यहाँ मदद कर सकता है।
SLaks

1
क्या .html फ़ाइल वास्तव में वह नहीं है जो आप चाहते हैं?
स्पर्स

@ शेपर: नहीं; मैं एक संपादक में एसवीजी में हेरफेर करना चाहता हूं (उदाहरण के लिए, इसे क्रॉप करें, एक बैनर जोड़ें), फिर इसे एक में डाल दें <img>। (एक वेब ऐप की मदद / टूर पेज के लिए)
SLaks

PNG या JPEG फाइल को SVG में कैसे बदला जाएगा?
हेयरऑफइनडॉग

7
यह एक अद्भुत उपयोगी विचार है। विशेष रूप से यूआई डिजाइनरों के लिए जिन्हें मौजूदा वेबसाइटों के विकास पर काम करना है। मैं एक उपकरण का भुगतान करूंगा जिसमें एसवीजी निर्यात होता है क्योंकि मुझे बिटकॉइन सॉफ्टवेयर्स के साथ मॉकअप पर काम करने से नफरत है, यह कुल बकवास है।
स्मॉनफ

जवाबों:


10

काफी स्क्रीनशॉट नहीं है, लेकिन अगर पेज अच्छी तरह से प्रिंट करता है तो आप इसे पीडीएफ के रूप में प्रिंट कर सकते हैं। इंकस्केप और इलस्ट्रेटर दोनों एक पीडीएफ को लोड करेंगे (और यदि आवश्यक हो तो इसे एसवीजी के रूप में सहेजें)।


जब मैंने इसे आज़माया, फ़ायरफ़ॉक्स ने बिटमैप रेडियो बटन को पीडीएफ फाइल में मुद्रित किया। क्रोमियम-ब्राउज़र और wkhtmltopdf ने सभी-सदिश फ़ाइलों का निर्माण किया।
रान्डेल व्हिटमैन

9

CSSBox WebVector HTML पेजों को SVG में बदल देगा। यह एक जावा कमांड-लाइन एप्लिकेशन है, और आप यहां इसके आउटपुट का एक नमूना देख सकते हैं ।


दोनों कमांड लाइन और जीयूआई मोड वास्तव में। मैंने एसवीजी को रेडियो बटन वाले एक छोटे एचटीएमएल फॉर्म को निर्यात करने के लिए वेबवेक्टर की कोशिश की। यह पूरी तरह से सदिश सामग्री युक्त एक एसवीजी फ़ाइल का उत्पादन किया, जैसा कि वांछित है - कोई एम्बेडेड बिटमैप सामग्री नहीं। रेडियो बटन वर्गों के रूप में प्रदान किए जाते हैं, जो विशिष्ट प्रतिपादन के चेकबॉक्स की तरह दिखते हैं।
रान्डेल व्हिटमैन

2

इसका उत्तर Chrome में बड़े वेबपेज स्क्रीनशॉट पर पहले से ही दिया गया है

मैं CutyCapt का उपयोग करता हूँ यह एक छवि के वेबकिट के रेंडर को कैप्चर करता है।

CutyCapt एक छोटा क्रॉस-प्लेटफ़ॉर्म कमांड-लाइन यूटिलिटी है जिसमें WebKit के वेब पेज के विभिन्न प्रकार के सदिश और बिटमैप स्वरूपों में एसवीजी, पीडीएफ, पीएस, पीएनजी, जेपीईजी, टीआईएफएफ, जीआईएफ, और बीएमपी को शामिल किया जा सकता है। इंटरनेट एक्सप्लोरर पर आधारित एक समान उपकरण के लिए IECapt देखें।


मैंने CutyCapt को SVG करने के लिए रेडियो बटन वाले एक छोटे HTML फॉर्म में निर्यात करने की कोशिश की। यह आंशिक रूप से वेक्टर और आंशिक रूप से बिटमैप सामग्री युक्त एक SVG फ़ाइल का उत्पादन करता है।
रान्डेल व्हिटमैन

CutyCapt ubuntu 18.04 पर कैनोनिकल रिपॉजिटरी में उपलब्ध है, इसलिए sudo apt install cutycaptमुझे इसे आज़माने के लिए सभी की आवश्यकता है। कुछ सेकंड की देरी से ( --delay=3000) यह मैथजैक्स भी प्रस्तुत करता है !!!
चेशायरकोव

0

एक दृष्टिकोण: यदि आप एक रेखापुंज स्क्रीनशॉट (PNG, JPG, आदि) लेते हैं, तो आप वेक्टर ऑब्जेक्ट्स में स्क्रीनशॉट में कुछ संबंधित रंगों के क्षेत्रों को "परिवर्तित" करने के लिए इनकस्केप में "ट्रेस बिटमैप" का उपयोग कर सकते हैं। मुझे यकीन है कि Adobe Illustrator में एक बराबर टूल है। इस बात का ख्याल रखें कि आप कितने अलग-अलग रंगों को ट्रेस करने के लिए निर्दिष्ट करते हैं - परिणामस्वरूप वेक्टर फाइलें जल्दी से जटिल हो सकती हैं। प्रत्येक रंग एक अलग वेक्टर ऑब्जेक्ट है जो मूल रेखापुंज छवि का प्रतिनिधित्व करने के लिए अन्य रंग वस्तुओं को ओवरलैप करता है, इसलिए आपको शायद कुछ साफ करने की आवश्यकता होगी।


1
सेटिंग्स को सही करने में इतना काम लगेगा, मुझे नहीं लगता कि यह स्वीकार्य होगा। लेकिन आप कभी नहीं जान पाते। एडोब फ्लैश यह भी कर सकता है, और चीजों को करने का एक अलग तरीका है, जिसके बेहतर या बदतर परिणाम हो सकते हैं।
SPRBRN

-1

यह आपकी मदद कर सकता है। फ़ायरफ़ॉक्स के रूप में एक महान ऐड-ऑन है, जिसे Save as PDF कहा जाता है, जो https://pdfcrowd.com/ से टूल का उपयोग करता है । अंतिम एसवीजी आउटपुट के लिए मैं फिर एसवीजी में बदलने के लिए एक ऑनलाइन टूल का उपयोग करूंगा।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.