जावास्क्रिप्ट के साथ एक वेबपेज का स्क्रीनशॉट लें?

148

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

मैं ब्राउज़र सुरक्षा मुद्दों से बहुत चिंतित नहीं हूँ। आदि कार्यान्वयन HTA के लिए होगा । लेकिन क्या यह संभव है?

javascript  hta 
— स्कॉट बेनेट-मैकलेश
स्रोत
क्या आप स्पष्ट कर सकते हैं कि आप ऐसा क्यों करना चाहते हैं? शायद स्क्रीनशॉट लेने के लिए वैकल्पिक समाधान हैं।
— अयुक
मैं उपयोगकर्ता को मोटे तौर पर डिजाइन करने के लिए देख रहा हूं कि वे क्या चाहते हैं, एक स्केच और वस्तुओं के एन ड्रैग का एक सा। मैं तब चाहता हूं कि इस "डिज़ाइन" का उपयोग उत्पादन प्रक्रिया में निर्देशों के कुछ भाग के रूप में किया जाए। यह निश्चित रूप से एक उपयोगकर्ता से जुड़ा कदम है, यहां कुछ भी स्पष्ट नहीं है :)
— स्कॉट बेनेट-मैक्लेश
— इलहान

जवाबों:

42

मैंने एक ActiveX नियंत्रण का उपयोग करके HTA के लिए ऐसा किया है। स्क्रीनशॉट लेने के लिए VB6 में नियंत्रण बनाना बहुत आसान था। मुझे keybd_event API कॉल का उपयोग करना पड़ा क्योंकि SendKey प्रिंटस्क्रीन नहीं कर सकता। यहाँ उस के लिए कोड है:

Declare Sub keybd_event Lib "user32" _
(ByVal bVk As Byte, ByVal bScan As Byte, ByVal dwFlags As Long, ByVal dwExtraInfo As Long)

Public Const CaptWindow = 2

Public Sub ScreenGrab()
   keybd_event &H12, 0, 0, 0
   keybd_event &H2C, CaptWindow, 0, 0
   keybd_event &H2C, CaptWindow, &H2, 0
   keybd_event &H12, 0, &H2, 0
End Sub

यह केवल आपको क्लिपबोर्ड पर विंडो प्राप्त करने के रूप में मिलता है।

एक अन्य विकल्प, यदि आप जिस विंडो का स्क्रीनशॉट चाहते हैं, वह एचटीए है तो सर्वर पर DOM नोड्स भेजने के लिए बस XMLHTTPRequest का उपयोग करना होगा, फिर स्क्रीनशॉट सर्वर-साइड बनाएं।

— जोएल अनयर
स्रोत
मैं एलन से सहमत हूं, यह संभावित रूप से एक पृष्ठ को स्क्रीनशॉट करने का एक सरल तरीका है!
— Ricket
कृपया "HTA" क्या है?
— पीट एल्विन
2
@PeteAlvin एक HTA हाइपरटेक्स्ट एप्लिकेशन है, जो इंटरनेट एक्सप्लोरर में विशेषाधिकार प्राप्त JS अनुप्रयोगों को चलाने का एक तरीका था। आज सुपर प्रासंगिक नहीं है।
— जोएल अनियर
141

Google Google+ में ऐसा कर रहा है और एक प्रतिभाशाली डेवलपर ने इसे इंजीनियर बनाया और http://html2canvas.hertzen.com/ का उत्पादन किया । IE में काम करने के लिए आपको http://excanvas.sourceforge.net/ जैसे कैनवास समर्थन पुस्तकालय की आवश्यकता होगी

— JAAulde
स्रोत
2
धन्यवाद, आपकी पोस्ट के लिंक हर
— चीज को
2
यदि आप अपने लिए ऐसा नहीं करना चाहते हैं, तो Usersnap एक कोशिश के लायक हो सकता है। यह एक प्लगइन (और कोई जावा, ActiveX या फ्लैश जो भी) स्थापित किए बिना अपने आगंतुकों से सटीक ब्राउज़र स्क्रीनशॉट प्राप्त करने के लिए समाधान में एक बूंद है।
— ग्रेगोर
— abilash er
14

एक और संभावित समाधान जो मैंने खोजा है वह है http://www.phantomjs.org/ जो पृष्ठों के स्क्रीनशॉट को बहुत आसानी से ले सकता है और एक पूरी बहुत कुछ। जब तक इस प्रश्न के लिए मेरी मूल आवश्यकताएं किसी और (अलग नौकरी) के लिए मान्य नहीं हैं, मैं संभवतः भविष्य की परियोजनाओं में फैंटमज को एकीकृत करूंगा।

— स्कॉट बेनेट-मैकलेश
स्रोत
क्या आप जानते हैं कि क्या प्रेत किसी पृष्ठ पर तत्व की छवि उत्पन्न कर सकते हैं (संपूर्ण पृष्ठ नहीं)?
— trusktr
हाँ तुम कर सकते हो। या तो इस स्निपेट का इस्तेमाल PhantomJS के साथ करें या CasperJS का उपयोग करें ।
— zopieux
12

पाउंडर अगर यह कैनवस में पूरे शरीर के तत्वों को सेट करके संभव है तो कैनवस 2image का उपयोग करना?

http://www.nihilogic.dk/labs/canvas2image/

— RobertPitt
स्रोत
आश्चर्य है कि अगर एसवीजी मदद करेगा, तो Google के स्रोत को देखना पड़ सकता है
— ल्यूक स्टेनली
1
आप कैनवास में HTML रेंडर करने के लिए निकल्स के html2canvas कोड का उपयोग कर सकते हैं, फिर एक इमेज को बचाने के लिए इसका उपयोग कर सकते हैं।
— त्रिकुटा
9

ऐसा करने का एक संभावित तरीका, अगर विंडोज़ पर चल रहा है और .NET स्थापित है तो आप कर सकते हैं:

public Bitmap GenerateScreenshot(string url)
{
    // This method gets a screenshot of the webpage
    // rendered at its full size (height and width)
    return GenerateScreenshot(url, -1, -1);
}

public Bitmap GenerateScreenshot(string url, int width, int height)
{
    // Load the webpage into a WebBrowser control
    WebBrowser wb = new WebBrowser();
    wb.ScrollBarsEnabled = false;
    wb.ScriptErrorsSuppressed = true;
    wb.Navigate(url);
    while (wb.ReadyState != WebBrowserReadyState.Complete) { Application.DoEvents(); }


    // Set the size of the WebBrowser control
    wb.Width = width;
    wb.Height = height;

    if (width == -1)
    {
        // Take Screenshot of the web pages full width
        wb.Width = wb.Document.Body.ScrollRectangle.Width;
    }

    if (height == -1)
    {
        // Take Screenshot of the web pages full height
        wb.Height = wb.Document.Body.ScrollRectangle.Height;
    }

    // Get a Bitmap representation of the webpage as it's rendered in the WebBrowser control
    Bitmap bitmap = new Bitmap(wb.Width, wb.Height);
    wb.DrawToBitmap(bitmap, new Rectangle(0, 0, wb.Width, wb.Height));
    wb.Dispose();

    return bitmap;
}

और फिर PHP के माध्यम से आप कर सकते हैं:

exec("CreateScreenShot.exe -url http://.... -save C:/shots domain_page.png");

फिर आपके पास सर्वर साइड में स्क्रीनशॉट है।

— RobertPitt
स्रोत
1
हालांकि सवालों से थोड़ा असंबंधित, यह एक भयानक सुझाव है! धन्यवाद !
— mihai
क्यों यह कुछ शैलियों लोड नहीं करता है कि मैं भी उन्हें IE9 में लोड देख सकते हैं ?!
— डॉ। टीजे
7

यह आपके लिए आदर्श समाधान नहीं हो सकता है, लेकिन यह अभी भी ध्यान देने योग्य हो सकता है।

Snapsie एक खुला स्रोत है, ActiveX ऑब्जेक्ट जो Internet Explorer स्क्रीनशॉट को कैप्चर और सहेजने में सक्षम बनाता है। क्लाइंट पर DLL फ़ाइल पंजीकृत होने के बाद, आपको स्क्रीनशॉट कैप्चर करना चाहिए और फ़ाइल को जावास्क्रिप्ट के साथ सर्वर पर अपलोड करना चाहिए। कमियां: इसे क्लाइंट पर DLL फ़ाइल को पंजीकृत करने की आवश्यकता है और यह केवल इंटरनेट एक्सप्लोरर के साथ काम करता है।

— निखिल
स्रोत
6

हमें बग की रिपोर्टिंग के लिए समान आवश्यकता थी। चूंकि यह इंट्रानेट परिदृश्य के लिए था, इसलिए हम ब्राउज़र ऐडऑन्स (जैसे फ़ायरफ़ॉक्स के लिए फ़ेरेशॉट और आईओएस स्क्रीनशॉट के लिए IE स्क्रीनशॉट ) का उपयोग करने में सक्षम थे ।

— गुलज़ार नाज़िम
स्रोत
3

SnapEngage एक का उपयोग करता है जावा एप्लेट एक ब्राउज़र स्क्रीनशॉट बनाने के लिए (1.5+)। AFAIK, java.awt.Robotको काम करना चाहिए - उपयोगकर्ता को केवल एप्लेट को इसे (एक बार) करने की अनुमति देना है।

और मुझे इसके बारे में एक पोस्ट मिली है:

— xmedeko
स्रोत
1

आप HTA और VBScript का उपयोग करके प्राप्त कर सकते हैं । स्क्रीनशॉट लेने के लिए बस एक बाहरी टूल को कॉल करें। मैं भूल गया कि नाम क्या है, लेकिन विंडोज विस्टा पर स्क्रीनशॉट करने के लिए एक उपकरण है। आपको इसके लिए एक अतिरिक्त स्थापित करने की भी आवश्यकता नहीं है।

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

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

— जब तक
स्रोत
वह इसे ग्राहकों के व्यक्तिगत उपयोग के लिए नहीं, कंप्यूटर पर वेब ऐप के एक हिस्से के रूप में करने की कोशिश कर रहा है
— mrBorna
1

मैंने पाया कि डोम-टू-इमेज ने अच्छा काम किया (html2canvas से बहुत बेहतर)। निम्नलिखित प्रश्न और उत्तर देखें: https://stackoverflow.com/a/32776834/207981

यह प्रश्न इस सर्वर पर वापस भेजने के बारे में पूछता है, जो संभव होना चाहिए, लेकिन यदि आप छवि डाउनलोड करना चाहते हैं , तो आप इसे FileSaver.js के साथ संयोजित करना चाहेंगे , और यदि आप एक ज़िप डाउनलोड करना चाहते हैं कई छवि फ़ाइलें सब उत्पन्न ग्राहक पक्ष jszip पर एक नज़र रखना ।

— bszom
स्रोत
0

जावास्क्रिप्ट में स्क्रीनशॉट लेने के लिए एक महान समाधान https://grabz.it द्वारा एक है ।

उनके पास एक लचीला और सरल-उपयोग स्क्रीनशॉट एपीआई है जिसका उपयोग किसी भी प्रकार के जेएस एप्लिकेशन द्वारा किया जा सकता है।

यदि आप इसे आज़माना चाहते हैं, तो सबसे पहले आपको प्राधिकरण ऐप कुंजी + गुप्त और मुफ्त एसडीके प्राप्त करना चाहिए

फिर, आपके ऐप में, कार्यान्वयन चरण होंगे:

// include the grabzit.min.js library in the web page you want the capture to appear
<script src="grabzit.min.js"></script>

//use the key and the secret to login, capture the url
<script>
GrabzIt("KEY", "SECRET").ConvertURL("http://www.google.com").Create();
</script>

स्क्रीनशॉट विभिन्न मापदंडों के साथ अनुकूलित किया जा सकता है । उदाहरण के लिए:

GrabzIt("KEY", "SECRET").ConvertURL("http://www.google.com", 
{"width": 400, "height": 400, "format": "png", "delay", 10000}).Create();
</script>

बस इतना ही। फिर बस थोड़ी देर प्रतीक्षा करें और छवि स्वचालित रूप से पृष्ठ के निचले भाग में दिखाई देगी, बिना आपको पृष्ठ को फिर से लोड करने की आवश्यकता होगी।

स्क्रीनशॉट मैकेनिज्म के अन्य फंक्शंस हैं जो आप यहां देख सकते हैं ।

स्क्रीनशॉट को स्थानीय रूप से सहेजना भी संभव है। इसके लिए आपको GrabzIt सर्वर साइड API का उपयोग करना होगा। अधिक जानकारी के लिए यहां विस्तृत मार्गदर्शिका देखें ।

— छोकरा
स्रोत
0

यदि आप इसे सर्वर की ओर करने के लिए तैयार हैं, तो PhantomJS जैसे विकल्प हैं , जो अब अपदस्थ है। जाने के लिए सबसे अच्छा तरीका है की तरह कुछ के साथ बिना सिर क्रोम होगा कठपुतली Node.JS. पर Puppeteer का उपयोग करते हुए एक वेब पेज पर कब्जा करना इस प्रकार सरल होगा:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

हालाँकि, यह आपके सर्वर पर चलने में सक्षम होने के लिए बिना सिर के क्रोम की आवश्यकता होती है, जिसमें कुछ निर्भरताएं होती हैं और प्रतिबंधित वातावरण पर उपयुक्त नहीं हो सकती हैं। (इसके अलावा, यदि आप Node.JS का उपयोग नहीं कर रहे हैं, तो आपको अपने ब्राउज़र की स्थापना / लॉन्चिंग को संभालने की आवश्यकता हो सकती है।)

यदि आप सास सेवा का उपयोग करने के इच्छुक हैं, तो कई विकल्प हैं जैसे कि

— एकिन कोक
स्रोत
0

आज तक अप्रैल 2020 तक GitHub पुस्तकालय html2Canvas https://github.com/niklasvh/html2canvas

GitHub 20K सितारे | अज्योर पाइपल्स: सफल | डाउनलोड 1.3M / मो |

उद्धरण: " जावास्क्रिप्ट एचटीएमएल रेंडरर स्क्रिप्ट आपको उपयोगकर्ताओं के ब्राउज़र पर सीधे वेबपृष्ठों या इसके कुछ हिस्सों के" स्क्रीनशॉट "लेने की अनुमति देती है । स्क्रीनशॉट डोम पर आधारित है और जैसे वास्तविक प्रतिनिधित्व के लिए यह 100% सटीक नहीं हो सकता है। एक वास्तविक स्क्रीनशॉट नहीं बनाता है, लेकिन पेज पर उपलब्ध जानकारी के आधार पर स्क्रीनशॉट बनाता है।

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