The tool html2canvas (http://html2canvas.hertzen.com/) creates screenshots of Web pages or its parts on the basis of displaying DOM objects.

However the html2canvas tool has limitations – it can not read the resources of other domains.
 
Therefore, to create screenshots of external Web sites it is necessary to use a proxy service on the server side that will send HTML code and images from the external Web site to the client side, which uses the tool html2canvas.
 
To create such a proxy service you can apply the Headless browser HTMLUnit (http://htmlunit.sourceforge.net/), which models HTML documents and provides the API to parse HTML pages.
 
To use the tool html2canvas on the HTML page of the application that will display a screenshot of an external Web site let’s add the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
 
<head>
 
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
 
<title>Sitemap Screenshots</title>
 
</head>
 
<script src="js/jquery.js"></script>
 
<script type="text/javascript" src="js/html2canvas.js"></script>
 
<script type="text/javascript">
 
$(document).ready(function() {
 
var url="http://www.cnn.com/";
 
$.ajax({
 
type: "POST",
 
url: "/htmlunit",
 
data:{ wait: "2000", url: url },
 
async: false,
 
success : function(data) {
 
$(".screenframe").remove();
 
var iframe="<iframe ></iframe>";
 
$('body').append($(iframe));
 
var target = $('iframe').contents()[0];
 
target.open();
 
target.write(data);
 
target.close();
 
$('iframe').load(function(){
 
var target = $(this).contents().find('body');
 
html2canvas(target, {
 
onrendered: function(canvas) {
 
var data = canvas.toDataURL();
 
$('body').append("<img width='500' src="+data+" />");
 
}
 
});
 
});
 
}
 
});
 
});
 
</script>
 
<body>
 
</body>
 
</html>
This script sends the URL of the external Web site to the servlet on the server side, which uses the HTMLUnit to return back the HTML code of the external Web site.
 
After receiving the HTML code of the external Web site this script creates the frame, adds it to the page, and writes the HTML code of the external Web site into the frame.
 
After downloading the frame the tool html2canvas creates its image and adds the created image to the application page.
 
The servlet code that serves as a proxy service:
import java.io.IOException;
 
import java.io.PrintWriter;
 
import javax.servlet.ServletException;
 
import javax.servlet.http.HttpServlet;
 
import javax.servlet.http.HttpServletRequest;
 
import javax.servlet.http.HttpServletResponse;
 
import com.gargoylesoftware.htmlunit.BrowserVersion;
 
import com.gargoylesoftware.htmlunit.WebClient;
 
import com.gargoylesoftware.htmlunit.html.HtmlPage;
 
@SuppressWarnings("serial")
 
public final class HTMLUnitServlet extends HttpServlet {
 
@Override
 
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 
int wait = 2000;
 
if (request.getParameter("url") != null) {
 
final WebClient webClient = new WebClient(BrowserVersion.CHROME);
 
webClient.getOptions().setThrowExceptionOnScriptError(false);
 
String url = request.getParameter("url");
 
HtmlPage page = webClient.getPage(url);
 
if (request.getParameter("wait") != null) {
 
wait=Integer.parseInt( request.getParameter("wait") );
 
}
 
webClient.waitForBackgroundJavaScript(wait);
 
response.setCharacterEncoding("UTF-8");
 
PrintWriter out = response.getWriter();
 
String xml=page.asXml();
 
System.out.println(xml);
 
xml = xml.replace("<head>","<head><base href='"+url+"' />");
 
out.println(xml);
 
}}}
 
Do not forget to declare the servlet in the web.xml:
 
<servlet>
 
<servlet-name>com.tmsoftstudio.HTMLUnitServlet</servlet-name>
 
<servlet-class>com.tmsoftstudio.HTMLUnitServlet</servlet-class>
 
</servlet>
 
<servlet-mapping>
 
<servlet-name>com.tmsoftstudio.HTMLUnitServlet</servlet-name>
 
<url-pattern>/htmlunit</url-pattern>
 
</servlet-mapping>
 

Unfortunately, such scheme of creating screenshots of external Web sites has its limitations related to the HTMLUnit capabilities of modeling HTML documents.

Our services

Our developments are at the forefront of high technologies

We design and develop web sites

Individual site design
Creating dynamic sites
Website layout and programming

We develop information systems

Automation of business processes for small and medium business
Collection, storage and processing of data
Using cloud technologies

We create mobile apps

Integration with a Web site
Creating mobile versions of web sites
Using Augmented Reality and Computer Vision

About us

NOV Tech Solutions specializes in developing services for operational management of business, creating web and mobile applications on order

NOV Tech Solutions is a team of highly qualified professionals working for the result

We work quickly and efficiently, using the most modern technologies

We appreciate and take care of our customers, constantly improving the service and expanding the list of services

Our partners

Contacts