<p>Is it possible to to take a screenshot of a webpage with JavaScript and then submit that back to the server?</p>

<p>I'm not so concerned with browser security issues. etc. as the implementation would be for <a href="http://msdn.microsoft.com/en-us/library/ms536471(vs.85).aspx" rel="noreferrer">HTA</a>. But is it possible?</p>

[{'answer_id': 60471, 'author': 'Till', 'author_id': 2859, 'author_profile': 'https://Stackoverflow.com/users/2859', 'pm_score': 1, 'selected': False, 'text': '<p>You can achieve that using HTA and <a href="http://en.wikipedia.org/wiki/VBScript" rel="nofollow noreferrer">VBScript</a>. Just call an external tool to do the screenshotting. I forgot what the name is, but on Windows&nbsp;Vista there is a tool to do screenshots. You don\'t even need an extra install for it.</p>\n\n<p>As for as automatic - it totally depends on the tool you use. If it has an API, I am sure you can trigger the screenshot and saving process through a couple of Visual Basic calls without the user knowing that you did what you did.</p>\n\n<p>Since you mentioned HTA, I am assuming you are on Windows and (probably) know your environment (e.g. OS and version) very well.  </p>\n'}, {'answer_id': 60614, 'author': 'Gulzar Nazim', 'author_id': 4337, 'author_profile': 'https://Stackoverflow.com/users/4337', 'pm_score': 3, 'selected': False, 'text': '<p>We had a similar requirement for reporting bugs. Since it was for an intranet scenario, we were able to use browser addons (like <a href="https://addons.mozilla.org/en-US/firefox/addon/5648" rel="nofollow noreferrer">Fireshot</a> for Firefox and <a href="http://www.softpedia.com/get/Tweak/Browser-Tweak/IE-Screenshot-Pro.shtml" rel="nofollow noreferrer">IE Screenshot</a> for Internet&nbsp;Explorer).</p>\n'}, {'answer_id': 63506, 'author': 'Joel Anair', 'author_id': 7441, 'author_profile': 'https://Stackoverflow.com/users/7441', 'pm_score': 6, 'selected': True, 'text': '<p>I have done this for an HTA by using an ActiveX control. It was pretty easy to build the control in VB6 to take the screenshot. I had to use the keybd_event API call because SendKeys can\'t do PrintScreen. Here\'s the code for that:</p>\n\n<pre><code>Declare Sub keybd_event Lib "user32" _\n(ByVal bVk As Byte, ByVal bScan As Byte, ByVal dwFlags As Long, ByVal dwExtraInfo As Long)\n\nPublic Const CaptWindow = 2\n\nPublic Sub ScreenGrab()\n   keybd_event &amp;H12, 0, 0, 0\n   keybd_event &amp;H2C, CaptWindow, 0, 0\n   keybd_event &amp;H2C, CaptWindow, &amp;H2, 0\n   keybd_event &amp;H12, 0, &amp;H2, 0\nEnd Sub\n</code></pre>\n\n<p>That only gets you as far as getting the window to the clipboard.</p>\n\n<p>Another option, if the window you want a screenshot of is an HTA would be to just use an XMLHTTPRequest to send the DOM nodes to the server, then create the screenshots server-side.</p>\n'}, {'answer_id': 63657, 'author': 'nikhil', 'author_id': 7926, 'author_profile': 'https://Stackoverflow.com/users/7926', 'pm_score': 3, 'selected': False, 'text': '<p>This might not be the ideal solution for you, but it might still be worth mentioning. </p>\n\n<p><em><a href="http://snapsie.sourceforge.net/" rel="nofollow noreferrer">Snapsie</a> is an open source, <a href="http://en.wikipedia.org/wiki/ActiveX" rel="nofollow noreferrer">ActiveX</a> object that enables Internet Explorer screenshots to be captured and saved.</em> Once the DLL file is registered on the client, you should be able to capture the screenshot and upload the file to the server withing JavaScript. Drawbacks: it needs to register the DLL file at the client and works only with Internet&nbsp;Explorer.</p>\n'}, {'answer_id': 3936602, 'author': 'xmedeko', 'author_id': 254109, 'author_profile': 'https://Stackoverflow.com/users/254109', 'pm_score': 2, 'selected': False, 'text': '<p>The <a href="http://www.snapengage.com/" rel="nofollow noreferrer">SnapEngage</a> uses a <a href="http://en.wikipedia.org/wiki/Java_applet" rel="nofollow noreferrer">Java applet</a> (1.5+) to make a browser screenshot. AFAIK, <code>java.awt.Robot</code> should do the job - the user has just to permit the applet to do it (once).</p>\n\n<p>And I have just found a post about it: </p>\n\n<ul>\n<li>Stack Overflow question <em><a href="https://stackoverflow.com/questions/2046812">JavaScript code to take a screenshot of a website without using ActiveX</a></em></li>\n<li>Blog post <em><a href="http://www.barklund.org/blog/2009/10/14/how-snapabug-works/" rel="nofollow noreferrer">How SnapABug works – and what they should do</a></em></li>\n</ul>\n'}, {'answer_id': 4012915, 'author': 'RobertPitt', 'author_id': 353790, 'author_profile': 'https://Stackoverflow.com/users/353790', 'pm_score': 4, 'selected': False, 'text': '<p>Pounder\'s if this is possible to do by setting the whole body elements into a canvase then using canvas2image ?</p>\n\n<p><a href="http://www.nihilogic.dk/labs/canvas2image/" rel="noreferrer">http://www.nihilogic.dk/labs/canvas2image/</a></p>\n'}, {'answer_id': 4340297, 'author': 'RobertPitt', 'author_id': 353790, 'author_profile': 'https://Stackoverflow.com/users/353790', 'pm_score': 3, 'selected': False, 'text': '<p>A possible way to do this, if running on windows and have .NET installed you can do:</p>\n\n<pre><code>public Bitmap GenerateScreenshot(string url)\n{\n    // This method gets a screenshot of the webpage\n    // rendered at its full size (height and width)\n    return GenerateScreenshot(url, -1, -1);\n}\n\npublic Bitmap GenerateScreenshot(string url, int width, int height)\n{\n    // Load the webpage into a WebBrowser control\n    WebBrowser wb = new WebBrowser();\n    wb.ScrollBarsEnabled = false;\n    wb.ScriptErrorsSuppressed = true;\n    wb.Navigate(url);\n    while (wb.ReadyState != WebBrowserReadyState.Complete) { Application.DoEvents(); }\n\n\n    // Set the size of the WebBrowser control\n    wb.Width = width;\n    wb.Height = height;\n\n    if (width == -1)\n    {\n        // Take Screenshot of the web pages full width\n        wb.Width = wb.Document.Body.ScrollRectangle.Width;\n    }\n\n    if (height == -1)\n    {\n        // Take Screenshot of the web pages full height\n        wb.Height = wb.Document.Body.ScrollRectangle.Height;\n    }\n\n    // Get a Bitmap representation of the webpage as it\'s rendered in the WebBrowser control\n    Bitmap bitmap = new Bitmap(wb.Width, wb.Height);\n    wb.DrawToBitmap(bitmap, new Rectangle(0, 0, wb.Width, wb.Height));\n    wb.Dispose();\n\n    return bitmap;\n}\n</code></pre>\n\n<p>And then via PHP you can do:</p>\n\n<p><code>exec("CreateScreenShot.exe -url http://.... -save C:/shots domain_page.png");</code></p>\n\n<p>Then you have the screenshot in the server side.</p>\n'}, {'answer_id': 6919676, 'author': 'JAAulde', 'author_id': 239567, 'author_profile': 'https://Stackoverflow.com/users/239567', 'pm_score': 7, 'selected': False, 'text': '<p>Google is doing this in Google+ and a talented developer reverse engineered it and produced <a href="http://html2canvas.hertzen.com/" rel="noreferrer">http://html2canvas.hertzen.com/</a> .  To work in IE you\'ll need a canvas support library such as <a href="http://excanvas.sourceforge.net/" rel="noreferrer">http://excanvas.sourceforge.net/</a></p>\n'}, {'answer_id': 9269601, 'author': 'Scott Bennett-McLeish', 'author_id': 1915, 'author_profile': 'https://Stackoverflow.com/users/1915', 'pm_score': 4, 'selected': False, 'text': '<p>Another possible solution that I\'ve discovered is <a href="http://www.phantomjs.org/" rel="noreferrer">http://www.phantomjs.org/</a> which allows one to very easily take screenshots of pages and a whole lot more. Whilst my original requirements for this question aren\'t valid any more (different job), I will likely integrate PhantomJS into future projects.</p>\n'}, {'answer_id': 44859895, 'author': 'Johnny', 'author_id': 2811258, 'author_profile': 'https://Stackoverflow.com/users/2811258', 'pm_score': 0, 'selected': False, 'text': '<p>A great solution for screenshot taking in Javascript is the one by <a href="https://grabz.it" rel="nofollow noreferrer">https://grabz.it</a>. </p>\n\n<p>They have a flexible and simple-to-use screenshot API which can be used by any type of JS application.</p>\n\n<p>If you want to try it, at first you should get the authorization <a href="https://grabz.it/api/#Key" rel="nofollow noreferrer">app key + secret</a> and the <a href="https://grabz.it/api/javascript/download.ashx" rel="nofollow noreferrer">free SDK</a></p>\n\n<p>Then, in your app, the implementation steps would be:</p>\n\n<pre><code>// include the grabzit.min.js library in the web page you want the capture to appear\n&lt;script src="grabzit.min.js"&gt;&lt;/script&gt;\n\n//use the key and the secret to login, capture the url\n&lt;script&gt;\nGrabzIt("KEY", "SECRET").ConvertURL("http://www.google.com").Create();\n&lt;/script&gt;\n</code></pre>\n\n<p>Screenshot could be customized with different <a href="https://grabz.it/api/javascript/parameters.aspx" rel="nofollow noreferrer">parameters</a>. For example:</p>\n\n<pre><code>GrabzIt("KEY", "SECRET").ConvertURL("http://www.google.com", \n{"width": 400, "height": 400, "format": "png", "delay", 10000}).Create();\n&lt;/script&gt;\n</code></pre>\n\n<p>That\'s all. \nThen simply wait a short while and the image will automatically appear at the bottom of the page, without you needing to reload the page.</p>\n\n<p>There are other functionalities to the screenshot mechanism which you can explore <a href="https://grabz.it/api/javascript/" rel="nofollow noreferrer">here</a>.</p>\n\n<p>It\'s also possible to save the screenshot locally. For that you will need to utilize GrabzIt server side API. For more info check the detailed guide <a href="https://grabz.it/support/?uniqueId=SaveJavaScriptScreenshot" rel="nofollow noreferrer">here</a>.</p>\n'}, {'answer_id': 49495374, 'author': 'maltem-za', 'author_id': 207981, 'author_profile': 'https://Stackoverflow.com/users/207981', 'pm_score': 2, 'selected': False, 'text': '<p>I found that <strong>dom-to-image</strong> did a good job (much better than html2canvas). See the following question &amp; answer: <a href="https://stackoverflow.com/a/32776834/207981">https://stackoverflow.com/a/32776834/207981</a></p>\n\n<p>This question asks about submitting this back to the server, which should be possible, but if you\'re looking to download the image(s) you\'ll want to combine it with <a href="https://github.com/eligrey/FileSaver.js/" rel="nofollow noreferrer">FileSaver.js</a>, and if you want to download a zip with multiple image files all generated client-side take a look at <a href="http://stuk.github.io/jszip/" rel="nofollow noreferrer">jszip</a>.</p>\n'}, {'answer_id': 53336136, 'author': 'Ekin Koc', 'author_id': 257925, 'author_profile': 'https://Stackoverflow.com/users/257925', 'pm_score': 1, 'selected': False, 'text': '<p>If you are willing to do it on the server side, there are options like <a href="https://github.com/ariya/phantomjs" rel="nofollow noreferrer">PhantomJS</a>, which is now deprecated. The best way to go would be Headless Chrome with something like <a href="https://github.com/GoogleChrome/puppeteer" rel="nofollow noreferrer">Puppeteer</a> on Node.JS. Capturing a web page using Puppeteer would be as simple as follows:</p>\n\n<pre><code>const puppeteer = require(\'puppeteer\');\n\n(async () =&gt; {\n  const browser = await puppeteer.launch();\n  const page = await browser.newPage();\n  await page.goto(\'https://example.com\');\n  await page.screenshot({path: \'example.png\'});\n\n  await browser.close();\n})();\n</code></pre>\n\n<p>However it requires headless chrome to be able to run on your servers, which has some dependencies and might not be suitable on restricted environments. (Also, if you are not using Node.JS, you might need to handle installation / launching of browsers yourself.)</p>\n\n<p>If you are willing to use a SaaS service, there are many options such as</p>\n\n<ul>\n<li><a href="https://restpack.io" rel="nofollow noreferrer">Restpack</a></li>\n<li><a href="https://urlbox.io" rel="nofollow noreferrer">UrlBox</a></li>\n<li><a href="https://screenshotlayer.com" rel="nofollow noreferrer">Screenshot Layer</a></li>\n</ul>\n'}, {'answer_id': 59056978, 'author': 'shaedrich', 'author_id': 7451109, 'author_profile': 'https://Stackoverflow.com/users/7451109', 'pm_score': 2, 'selected': False, 'text': '<p>This question is old but maybe there\'s still someone interested in a state-of-the-art answer:</p>\n\n<p>You can use <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia" rel="nofollow noreferrer"><code>getDisplayMedia</code></a>:</p>\n\n<p><a href="https://github.com/ondras/browsershot" rel="nofollow noreferrer">https://github.com/ondras/browsershot</a></p>\n'}, {'answer_id': 61255772, 'author': 'zennni', 'author_id': 2369164, 'author_profile': 'https://Stackoverflow.com/users/2369164', 'pm_score': 0, 'selected': False, 'text': '<p>As  of today Apr 2020 GitHub library html2Canvas \n<a href="https://github.com/niklasvh/html2canvas" rel="nofollow noreferrer">https://github.com/niklasvh/html2canvas</a></p>\n\n<p><strong>GitHub 20K stars</strong> | Azure pipeles : Succeeded | Downloads 1.3M/mo   |</p>\n\n<p>quote : " <em>JavaScript HTML renderer The script allows you to <strong>take "screenshots" of webpages or parts of it, directly on the users browser</strong>. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.</em></p>\n'}, {'answer_id': 62433612, 'author': 'Diego Favero', 'author_id': 688689, 'author_profile': 'https://Stackoverflow.com/users/688689', 'pm_score': 0, 'selected': False, 'text': '<p>I made a simple function that uses rasterizeHTML to build a svg and/or an image with page contents. </p>\n\n<p>Check it out :</p>\n\n<p><a href="https://github.com/orisha/tdg-screen-shooter-pure-js" rel="nofollow noreferrer">https://github.com/orisha/tdg-screen-shooter-pure-js</a></p>\n'}]
['https://Stackoverflow.com/questions/60455', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1915/']