I have read the various posts here on SO regarding screen capturing, but none seem to be answering my situation.
On our website (inside a web page), essentially here is what I would like to be able to do.
User clicks on a 'capture region of screen' button
They get some sort of draggable/sizable box they can use to define the area to capture
the captured area gets converted into a (preferrably) .png
image is uploaded (or at least made available to upload - maybe saved somewhere)
I realize this is not doable with javascript alone. So, I am open to a Java or Flash solution, and/or even a commercial solution (a drop-in java applet that I can add to our site).
So, is something like this available, or any other ideas on how I might approach this?
Thanks.
Check out PhantomJS. http://www.phantomjs.org/
Actually it will re-render page on your server stack and you can save it as a png. Not same as your desired workflow, but definitely worth checking out.
Related
I'm working on a way to detect defacement on my website. The idea is to crawl the whole website and for each page, take a screenshot or render the website as an image and compare it with the last time the page has been checked.
I'm looking for a way to convert a whole webpage (HTML, CSS, JS) into an image, like a screenshot, no matter the language is (but I would prefer Java, Python or C#)
I need it to be fast and usable on a server.
I already tried the folowing in Java:
CssBox, but the rendering isn't good enough (no JS)
Selenium Web Driver, but it's way too slow (Time to open firefox, display the page etc...) and not usable without GUI
I think a solution would be a kind of wrapper for a web engine but I didn't find anything about that (at least in Java). I've been told PhantomJS would fit for this need, is it right?
The perfect result would be to create something like that: http://www.page2images.com/home
Use a browser which you can control via a script or command line options like phantomjs. The documentation contains examples how to make screenshots from URLs.
The website you linked offer some good rest API that perform the task: it's not a viable option for you?
Selenium is your best bet. Depending on your page content (ie. JS libraries, etc) it might take some time, but you could automate this with a script to run nightly via cron. Or using screen.
It has a rich language of assertions and simulated mouse events, and ways to regression-test and/or monitor the state of a set of pages.
Good luck.
With no GUI, it's probably not possible to do something like this.
If you're not too tight on the GUI and related things, you can use the JavaFX Webview and take a screenshot of the node using the following code
WritableImage image = webView.snapshot(null, null);
BufferedImage bufferedImage = SwingFXUtils.fromFXImage(image, null);
....
References:
WebView#snapshot
SwingFXUtils#fromFXImage
How to take user's current page screen shot and save into one folder in web application,
I tried in java side,
In that I used Robot class its taking server screen instead of client screen.
You can use phantomjs
http://phantomjs.org
If you want to use it along with nodejs , there are many nodejs bridges available also
I have used node-phantom and it works really well
https://github.com/alexscheelmeyer/node-phantom
Well , this is not a pure jquery solution. But i used node-phantom with the support socket.io and jquery.
If your are interested in taking a sceenshot of the webpages (or parts of them), you should take a look at html2canvas project.
It's not taking the "actual screenshots" of the current page, but rather builds a representation of it based on the properties it reads from the DOM.
If you are using HTML5, take a look at this Take Webpage Screenshot with HTML5 and JavaScript
So, this will take you a screenshot. Later you may decide what to do with it. You can push it to you server side service and store it to a file/db.
You can go for casperjs.
http://casperjs.org/
There is a nice example to capture the screen.
http://docs.casperjs.org/en/latest/modules/casper.html#captureselector
In my Java EE application page, I have header.jsp, a side menu.jsp, a body.jsp and footer.jsp. The side menu contains the jQuery dynatree plugin. When a user clicks a menu item from the tree, the body should be changed with the appropriate page (also a .jsp). I am using tiles framework, where I am importing all js code in layout.jsp page. I want to achieve an effect replicating a frameset, but without actually using a frameset. I think framesets are difficult to be managed and take time to load.
Can anyone suggest how I can approach this problem? If I use AJAX to fetch each page when dynatree node is activated, then I have to manually update the page. If I use an IFRAME in body.jsp, then I have to reimport all plugin js code as the frame will not be able to access js functionality on the main page.
I want efficient html page management.
Since you are using jQuery, you should be able to use AJAX in combination with the live method of applying events (see the docs or here). This method is called "event delegation", and even though jQuery will do it for you like magic, you should understand what is happening. Depending on what version of jQuery you are using, you might use delegate instead of live - essentially the same thing.
Framesets are actually deprecated in HTML5 -- you should avoid using them because soon they will not be supported at all in newer user agents. See http://www.useit.com/alertbox/9612.html for a lengthy discussion that should hopefully dissuade you from considering that approach.
The IFRAME approach is a hack. You might be able to make it work, but you're hammering a square peg into a round hole.
Bottom line, if you don't want to directly deep link to inner pages, AJAX is the best and preferred solution. In combination with event delegation, it really is superior to any older or hacky solution. And, be sure to use the idea of "progressive enhancement" -- if someone clicks those links and has javascript turned off, the content should still load. That means you start with regular direct links, then add the fancy stuff on to it for those users that have javascript enabled. Otherwise, you close a percentage of users off from anything past your home page.
When you use AJAX for your navigation, you still need to plan for a user that doesn't understand the difference between when they click a link on your site or any other site. They'll use the browser's "back" button and end up back at Google instead of on the last page! That's because their navigation through your site does not look like unique pages to their browser. There are tools in newer browsers to deal with this, but the details are a little beyond the scope of this answer. Check out this article on MDN for more info on manipulating the browser history.
Documentation
jQuery's live - http://api.jquery.com/live/
jQuery's delegate - http://api.jquery.com/delegate/
David Walsh on event delegation - http://davidwalsh.name/event-delegate
Jakob Nielsen on Framesets - http://www.useit.com/alertbox/9612.html
MDN on Browser History Modification - https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
jQuery for Designers blog with a sample use-case for delegate - http://jqueryfordesigners.com/simple-use-of-event-delegation/
Wikipedia article about progressive enhancement - http://en.wikipedia.org/wiki/Progressive_enhancement
It appears the start page is an html document rendered somehow. I know about jWebPane, but its dead and the only other active solution I can find is to embed firefox which is a huge dependency and eats up a ton of memory. Is there any lightweight solution for this?
JEditorPane is the built in Java webpage viewer. It's not a full blown browser but it should do the trick!
The nice part is that it will let you handle link clicks, for instance you could open a screen of you application when the user clicks a link.
CSS seems to be partially supported according to this StackOverflow question/answer
I had to take a surveymonkey survey today, and the format was as follows: a question was asked, then after hitting the next button, the answer was displayed as "Answer: _" along with an explanation. For kicks, I'd like to make a program that could take this survey, answering any letter, then going to the next page and reading the answer, then going back and changing the answer to the correct one, then going 2 pages ahead and repeating.
I am familiar with Java and Python, but I'm not sure how to make them be able to "know" where the button is, and how to "read" text without unnecessary image recognition.
This is just a fun project, nothing serious, but I would appreciate any ideas to get me started.
Assuming that the text was just that (text rather than images), there are a few useful tools for you:
.Net WebControl - I've scripted this before from .Net. It has the advantage of making all of the JS on the page still work. I know this isn't Java, but it is surprisingly easy to work with for this kind of task.
Selenium - It is primarily a web testing framework, but it would be easy to script it from Java to auto-submit forms.
TagSoup for Java - If the pages do not have significant javascript code that needs to run, there are many HTML parsers for Java that could potentially be used to develop a scraper.
Would it be unrealistic to make it post to the survey monkey pages? You could then do some regex's to pull "answer:__" out and look for that pattern in the original page. It would definitely be easier than trying to click things in a browser, etc. Basically, write a java app or python for that matter that does http posts to the survey pages in order and uses regex's to find the next page, etc and then use a stack to keep track of the history.
Edit if this isn't clear, let me know, I'll clarify
Edit 2: I completely forgot about HTMLUnit, my bad. It is a testing framework like suggested by jsight but specifically for Java and functions very similarly to JUnit, however, because it is designed for testing web applications, it can be used to automate interactions with other sites
You can do it using a simple image search. First screenshot the a unique part of the button and save it. This will be used as the relative reference on where you click the mouse. Then during the actual running of the application, have a screenshot of the entire screen and find a part matching the previously saved image and then let the mouse click on the appropriate location based on the button image location.