Posts Tagged ‘ thumbnail ’

Building your own webpage to image service on web

So we have gone through a demo in my recent post on how to generate an image of a webpage using QT and java. In this post I want to announce that I have created set of RESTFul web services using Spring Framework to extend my little piece of software to a web based service. Spring MVC provides a great @nnotations support to create RESTFul Web services in minutes. You can checkout my project from GitHub.

Software as a Service

Here is the documentation of my SaaS implementation. This documentation contains all required information, from obtaining the source code to deployment. Give it a try and provide your valuable comments here.  I am sure that there can be number of interesting use of this software as a service, also if you have any idea of extending this service please make a note of it here. I do have plans to add some more functionality into this, but it just depends on resource availability :D.  

UPDATE:

As web browsers are advanced now a days there are lots of interesting stuffs have been added into them. Recently I came to know that you can take a snapshot of a webpage using canvas object and few lines of javascript. There are already numbers of plugins available which are doing this internally. So now I think its not fruitful to send whole web page content to server to prepare the snapshot and hence I will discontinue this project. But glad to hear that there are easier ways to do stuff like this.

Generate Image or Thumbnail of a webpage using java

Long time ago in a project we had requirement to show image of a webpage on mouseover of link. I started looking for a pure java implementation for the same. After searching a lot I came to know that it is not feasible to generate image of a webpage using pure java.

Before some days back I came to know that this can be achieved easily through QT library, which is a  cross platform application and UI platform written in C++. QT library provides webkit engine to render webpages in their natural look and feel, so I decided to write my own JNI wrapper on top of QT thumbnail application. But after spending some time on my core c++ application I came to know about QT-Jambi, a java wrapper for QT library.

So I started with QT-Jambi and managed to write my own implementation of Thumbnailer application. Here I am sharing SiteGraphThumbnailerDemo program using the same. Have a look at code snippet below which describes key points in the Thumbnailer application. To save spaces I have removed import statements, constructors and getters-setters. Eager developers like me can directly jump to the Download link of whole source code at the end of this post.

QT Jambi provides QWebPage object which is a part of QT Webkit library.

protected QWebPage page;

As shown below makeSnap() method is used to load html content of a provided URL. QT-Jambi provides event based method invocation mechanism. In below method we have registered loadStarted(), loadProgress() and loadDone()method hooks for specifict implementation for these events.


   /**
	 * Method to load html content from provided url
	 */
	public boolean makeSnap(){
		try{
		if(logger.isDebugEnabled())
			logger.debug("Connecting to url : "+this.url);
		if(QApplication.instance() == null)
			QApplication.initialize(new String[] { });
		page = new QWebPage(null);
		page.mainFrame().load(new QNetworkRequest(this.url));
		logger.debug("Page Loaded");
		page.loadStarted.connect(this, "loadStarted()");
		page.loadProgress.connect(this, "loadProgress()");
		page.loadFinished.connect(this, "loadDone()");
		logger.debug("Load Finished");
		finished.connect(QApplication.instance(), "quit()");
		QApplication.exec();
    	}catch(Exception exp){
			logger.error(exp.getMessage()+ " Error While taking a snap");
			return false;
		}
		return true;
	}
Once the whole web page is rendered in QT Webkit engine loadDone() event is invoked internally and image processing can be completed using loaded webpage content. You can verify content loading start and content loading progress in loadStarted() and loadProgress() event hooks.
	private void loadStarted(){
		logger.debug("Part in Started");
	}
	private void loadProgress(){
		logger.debug("Part in Progress");
	}
Once image loading is completed QWebPage provides lots of customization on loaded content before exporting it to a full fledged image. It includes image scaling, transformations etc. Check QT-Jambi Javadoc for more information on QImage.
	/**
	 * Called internally by makeSnap() method to save loaded image(s) based on provided ImageAttribute details.
	 */
	private boolean loadDone() {
		logger.debug("Loading for page url : "+ this.url);
		for(ImageAttributes imageAttribute: this.imageAttributes){
			logger.debug("Loading for page url : "+ this.url);
			page.setViewportSize(imageAttribute.getImageSize());
			page.mainFrame().setScrollBarPolicy(Orientation.Horizontal, ScrollBarPolicy.ScrollBarAlwaysOff);
			page.mainFrame().setScrollBarPolicy(Orientation.Vertical, ScrollBarPolicy.ScrollBarAlwaysOff);
			page.setViewportSize(new QSize(Constants.DEFAULT_IMAGE_WIDTH, Constants.DEFAULT_IMAGE_HEIGHT));
		    QImage image = new QImage(page.viewportSize(), QImage.Format.Format_ARGB32);
		    image.fill(QColor.white.rgb());
		    QPainter painter = new QPainter(image);
		    page.mainFrame().render(painter);
		    painter.end();
		    String imageName= imageAttribute.getAbsoluteImageFilePath() + imageAttribute.getImageSuffix();
		    logger.debug("Preparing image : "+ imageName);
		    logger.info("Image prepared: "+image.save(imageName));
		}
	    finished.emit();
	    return true;
    }

You can download whole source code for this demo application from box.net.

Note that Apache Maven is used to resolve dependencies of this application. QT-Jambi dependencies can take some time to load with a slow internet connection as it’s total size is approx. 85MB.

Please add your suggestions/comments below.

UPDATE : Looks like number of people have downloaded above demo. Please provide your comments/suggestions below regarding the demo or post.

%d bloggers like this: