Take a screenshot of whole screen using html5/javascript? - javascript

I am looking to take a full screenshot through a webpage, outside of the browser window. Basically, I am trying to build a help tool for both web-based apps and offline programs, and as a part of this I would like to be able to take screenshots from a webpage so the user does not have to download a program to take a screenshot/upload it to our website.
I am aware there may not be a solution to this, but if there was that would be awesome!
Cheers in advance

There are ways to achieve what you want to do in part. However, it is important to know that they do require user permissions.
You also ask if a web page can take a screenshot outside of a browser window- this is a huge breach of privacy and I would advise against implementing anything that goes down this route. For what your trying to do, it is always best to have user consent.
If you interest is in saving the user time and giving the user a more seamless experience, consider one or more of these options:
You can use one of several JavaScript plugins/ API's to allow to user to select portions of what they see on the web page and then upload it to you. For instance, you can do this on YouTube. Go to youtube.com and scroll to the bottom of the page and click Help and then Send feedback. Here you can enter text as well as "highlight" portions of the page and send them to YouTube. To achieve something like this, look into something like html2canvas.
Give your user quick access to the download pages for tools like Snipping Tool for Windows. This way, if they don't have it on their machine already, at least they don't have to go looking for it.
From my experience in dealing with customers, many of them don't even know that things like Snipping Tool exist on their machine. Perhaps, an FAQ or help section that would guide the user would be useful.
In summary, it is possible through a web page to "screenshot" what is on a web page itself but nothing I have come across that allows you to capture anything outside of the web browsers context.

This is definitively not possible using only HTML5/JavaScript. You would have to involve a browser plugin such as Flash, a Java applet or perhaps a Firefox add-on.
Note: I'm assuming you mean taking a screenshot of the entire monitor, not just the browser window.

Related

web app- Would it be possible to disable Windows+Printscreen?

I am trying to prevent users from taking screenshot in my web application written in Java.From my research,it seems highly unlikely.I did found a link below:
https://stackoverflow.com/questions/3130983/stop-user-from-using-print-scrn-printscreen-key-of-the-keyboard-for-any-we
It's able to disable the printscreen button but it doesn't disable if a user tries to use windows+printscreen.Now, I know even if I do managed to disable it, there's other third party application like snipping tools,camera,etc to take a screenshot but that's way beyond my control and I'm not looking into those.
I was just wondering is there a way to disable Win+Printscreen to prevent user from screenshotting?
If anyone has done it before, I appreciate any sort of suggestion.
Simple answer: No
Have a quick think about why you need to hide this info, does it really matter if other people see it? I assume that you have proof that you came up with your conclusion/process first? The information will never remain exclusive forever, especially not on the internet.
You normally do not have access to higher level controls so it is normally not possible with a web app. Having said that, there are several possible ideas:
Send your content directly to the graphics device/card via an API so that it is never visible to the operating system screen space (Where print screen works). However, with the right tools it is still possible to catch a graphics stream but it's a little harder for the average user.
Make your webapp launch a custom desktop application with more control over the OS (Download an exe and run it?)
Design a plugin/extension for a web browser that limits the use of printScreen, and then only show content on your webapp if your site can see that the plugin/extension is installed and running. This may not work with the way that Chrome and Firefox now manage plugins, it would need more investigation.
The best answer would be to only show limited info/conclusions on your webapp, and keep all the proof of concept hidden. Then you can make people sign-up to your app if they want more information, and then give a strict set of criteria that must be met.

Can you block a website from being in a browser's history?

Strange question here.
I'm building a website for a client that is an abused women's shelter. They want to ensure the safety of women looking for their services.
One of their requests is that if someone uses their website, that somehow it won't register on the browser's history. I've never seen that before, but need to at least look into it.
My only thought is to somehow load all pages within a single page, then make that page not have the actual shelter's name in the title and url. So if someone happens to look at the history, it'll show like "Sue's Bakery" instead of the actual name.
This may be a stretch, but I'm just looking for any suggestions here.
If there is actual code to block the website from a browser's history, that'd be even better.
Thoughts???
There's no way to prevent a site from appearing in a browser's history. Likewise there is no reliable way to detect if the user is using Private Browsing mode (and so redirect them to a "safe" site if they're not).
As others have said; if they're accessing the site via Google, it would be best to offer clear instructions on how to remove items from a browser's history (showing different illustrated instructions for each browser).
If they're accessing the site from somewhere else, instructions could be listed there to inform them how to enable (and later, disable) Private Browsing mode.
You mention attempting to hide the site via a fake name. One way this might work is placing the site into a dummy site with an iframe pointing to the "real" site. The iframe could be for "Sue's Bakery" (as you said), but the iframe would house the content from the real website. Unfortunately I don't believe Google would like this, and so nobody will ever find the "safe" iframe version of the site through Google. Would this be a problem?
There may be a way to try and take users to the iframe version of the site, and Google to the "real" version, but it would likely be unreliable not something Google would like you to do (perhaps Google should add such a feature to their rankings for registered abuse charities -- hmm).
Sorry for not being able to offer a clear and easy solution, but I don't believe one exists.

Javascript: Get SharePoint Web Part - Objects to display on page

I am a young software engineer working on a mobile view for SharePoint 2013. For this, I have to access SharePoint Web Part - Objects with javascript.
The javascript should be linked in the Masterpage and starts after the page is done loading. Then, it should modify web parts.
For example, I want to resize web parts to fit to the max. available screen-resolution.
I want to turn the standard navigation into a drop down.
I want to fetch single informations out of different web parts and work with it.
I want to do change basically everything you can see on a standard page. :D If I am on the false road, pls tell me so.
I do not want anybody to post a link to a script or smth. - I wanna do the work ;)
But if you could give me a good hint or anything like that, I would highly appreciate it.
I already did a lot of research but due to the complex documentation of Microsoft's Products I did not find a proper solution. I think it's kind of a sad thing to be like that, because SharePoint is a great tool you could do so much with, if there would only be a document telling you how and where.
Have you thought of doing a different master page and layouts for mobile devices and have a redirection on the server side that when it detects the user agent of a mobile device that you're interested on redirecting it points the user to the mobile site? You wouldn't need to do the whole thing with JavaScript/jQuery since you could have the master and the layouts have the size that you want from the start. You could limit the width of the web part zones with some custom css as well.
Good luck!

Webapp in 2 monitors

I am trying to find a way how to build a browser web app that runs in 2 monitors, like;
i have a secondary monitor that i want to put there some window, i want it fullscreen, and automatically in the secondary, so no drags, while the main app should stay in the primary monitor, where is the browser... no way seems, nothing really works so the only way seems to be with some desktop app.
I don't really care if the solution is browser dependent at this point, but still can't find a real solution.
Does a ny body tried something like this and can give me some ideas how to build it?
EDIT
... i need the second monitor to have some specific content, so not a clone of the primary...
kind of... i'm playing some game in the first monitor and i see statistics on the second...
What you are trying to do is not possible yet, but there is a Presentation API that is being discussed that would let you do exactly what you are looking for:
This specification defines an API to enable web content to access external presentation-type displays and use them for presenting web content.
Unfortunately, it seems like there are no browser implementations yet.
Your only other option right now is to use 2 independent browser pages that communicate with each other somehow (LocalStorage, WebSockets etc.).

Script to download CAPTCHA images

For completely non-nefarious purposes - machine learning specifically, I'd like to download a huge dataset of CAPTCHA images. However, CAPTCHA is always implemented using some obfuscated javascript that makes getting at the actual images without a browser a non-trivial task, at least to me, who is a javascript novice.
So, can anyone give me some helpful pointers on how to download the image of the obscured word using a script completely outside of a browser? And please don't point me to a dataset of already collected obscured words - I need to collect the images from a specific website for this particular experiment.
Thanks!
Edit: Another way this question could be asked is very simple. When you click "view source" on website with complicated javascript, you see the script references, but that's all you see. However, if you click "save webpage as..." (in firefox) and then view the source of the saved webpage, the javascript will be resolved and new html and the images (at least in the case of ASIRRA and reCAPTCHA) is in the source. How can I mimic this "save webpage as..." behavior using a script? This is an important web coding question in general, so please stop questioning me on my motives with this! This is knowledge I can use from now on in all web development involving scripting and I'm sure other stack overflow visitors can as well!
While waiting for an answer here I kept digging and eventually figured out a sort of hacked way of getting done what I wanted.
First off, the reason this is a somewhat complicated problem (at least to a javascript novice like me) is that the images from ASIRRA are loaded onto the webpage via javascript, which is a client-side technology. This is a problem when you download the webpage using something like wget or curl because it doesn't actually run the javascript, it just downloads the source html. Therefore, you don't get the images.
However, I realized that using firefox's "Save Page As..." did exactly what I needed. It ran the javascript which loaded the images, and then it saved it all into the well-known directory structure on my hard drive. That's exactly what I wanted to automate. So... I found a firefox Add-on called "iMacros" and wrote this macro:
VERSION BUILD=6240709 RECORDER=FX
TAB T=1
URL GOTO=http://www.asirra.com/examples/ExampleService.html
SAVEAS TYPE=CPL FOLDER=C:\Cat-Dog\Downloads FILE=*
Set to loop 10,000 times, it worked perfectly. In fact, since it was always saving to the same folder, duplicate images were overwritten (which is what I wanted).
Why not just get CAPTCHA yourself and generate images? reCAPTCHA's free too.
http://www.captcha.net/
Update: I see you want it from a specific site but if you get your own you can tweak it to give the same kind of images as the site you're targeting.
Get in contact with the people who run the site and ask for the dataset. If you try to download many images in any suspicious way, you'll end up on their kill list rather quickly which means that you won't get anything from them anymore.
CAPTCHAs are meant to protect people against abuse and what you do will look like abuse from their point of view.

Categories