Image

Liferay Gallery Portlet

Our latest Liferay Image Gallery Portlet is finally available on the marketplace. We have teamed up with our good friends at Infira and implemented a really neat looking image gallery that you can use to present your portfolio, products, contacts or team event pictures.

Our Fancy animated liferay gallery portlet with document library support has these features:

  • Uses your specified Liferay built-in Document Library Folder as the image source.
  • Fully Responsive Design
  • Automatic Image Positioning
  • Click-to-enlarge
  • Ability to show/hide title and description of image
  • Supports multiple instances per page
  • Configurable (you can adjust all aspects of the portlet)
  • Adjustable colors and thumbnail size

screen4

screen5

screen1

 

This portlet is based on a special version of Opie Scripts Responsive Fully Customizable jQuery Portfolio Gallery.

For those of you who have been following our latest activity in the Liferay world you might want to know that we are working hard at the moment to release our next item into the marketplace which will be a super fancy dashboard theme that transforms your Liferay into really nice dashboard that’s properly suitable for the big screens and small screens. Stay tuned!

 

Java watermark image

Today I needed to add a watermark on my client images. I had a look around for available libraries. I didn’t find a good solutions that I could use straight out of the box in Java so I just created my own ImageUtil class and made my own Java watermark image method.

First things first – If we want to watermark an image then we have to decide on where should we anchor our watermark. For that I decided to use a simple ENUM called PlacementPosition:

public enum PlacementPosition {
	TOPLEFT, TOPCENTER, TOPRIGHT, MIDDLELEFT, MIDDLECENTER, MIDDLERIGHT, BOTTOMLEFT, BOTTOMCENTER, BOTTOMRIGHT
}

When you want to add a watermark then you probably need to resize it so you might want a good image resizer. That one I found and we can use an already existing one. I personally prefer to use Scalr named image library from https://github.com/thebuzzmedia/imgscalr because it’s very good, pretty damn fast and has controllable quality. Also it’s available on Maven repository.

So now the actual code of watermarking an image:


	/**
	 * Generate a watermarked image.
	 * 
	 * @param originalImage
	 * @param watermarkImage
	 * @param position
	 * @param watermarkSizeMaxPercentage
	 * @return image with watermark
	 * @throws IOException
	 */
	public static BufferedImage watermark(BufferedImage originalImage,
			BufferedImage watermarkImage, PlacementPosition position,
			double watermarkSizeMaxPercentage) throws IOException {

		int imageWidth = originalImage.getWidth();
		int imageHeight = originalImage.getHeight();

		int watermarkWidth = getWatermarkWidth(originalImage, watermarkImage,
				watermarkSizeMaxPercentage);
		int watermarkHeight = getWatermarkHeight(originalImage, watermarkImage,
				watermarkSizeMaxPercentage);

		// We create a new image because we want to keep the originalImage
		// object intact and not modify it.
		BufferedImage bufferedImage = new BufferedImage(imageWidth,
				imageHeight, BufferedImage.TYPE_INT_RGB);
		Graphics2D g2d = (Graphics2D) bufferedImage.getGraphics();
		g2d.drawImage(originalImage, 0, 0, null);
		g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
		        RenderingHints.VALUE_ANTIALIAS_ON);

		int x = 0;
		int y = 0;
		if (position != null) {
			switch (position) {
			case TOPLEFT:
				x = 0;
				y = 0;
				break;
			case TOPCENTER:
				x = (imageWidth / 2) - (watermarkWidth / 2);
				y = 0;
				break;
			case TOPRIGHT:
				x = imageWidth - watermarkWidth;
				y = 0;
				break;

			case MIDDLELEFT:
				x = 0;
				y = (imageHeight / 2) - (watermarkHeight / 2);
				break;
			case MIDDLECENTER:
				x = (imageWidth / 2) - (watermarkWidth / 2);
				y = (imageHeight / 2) - (watermarkHeight / 2);
				break;
			case MIDDLERIGHT:
				x = imageWidth - watermarkWidth;
				y = (imageHeight / 2) - (watermarkHeight / 2);
				break;

			case BOTTOMLEFT:
				x = 0;
				y = imageHeight - watermarkHeight;
				break;
			case BOTTOMCENTER:
				x = (imageWidth / 2) - (watermarkWidth / 2);
				y = imageHeight - watermarkHeight;
				break;
			case BOTTOMRIGHT:
				x = imageWidth - watermarkWidth;
				y = imageHeight - watermarkHeight;
				break;

			default:
				break;
			}
		}

		g2d.drawImage(Scalr.resize(watermarkImage, Method.ULTRA_QUALITY,
				watermarkWidth, watermarkHeight), x, y, null);

		return bufferedImage;

	}

watermark-full-width

That method uses some specific methods to calculate the watermark size. I wanted the user to be able to upload their own watermarks but that caused a problem where I didn’t want to hard-code the size of the watermark. So we ended up using a solution where we have defined a maximum percentage of size that the watermark can be relative to the original image.

For that we use these methods:



	/**
	 * 
	 * @param originalImage
	 * @param watermarkImage
	 * @param maxPercentage
	 * @return
	 */
	private static Pair<Double, Double> calculateWatermarkDimensions(
			BufferedImage originalImage, BufferedImage watermarkImage,
			double maxPercentage) {

		double imageWidth = originalImage.getWidth();
		double imageHeight = originalImage.getHeight();

		double maxWatermarkWidth = imageWidth / 100.0 * maxPercentage;
		double maxWatermarkHeight = imageHeight / 100.0 * maxPercentage;

		double watermarkWidth = watermarkImage.getWidth();
		double watermarkHeight = watermarkImage.getHeight();

		if (watermarkWidth > maxWatermarkWidth) {
			double aspectRatio = watermarkWidth / watermarkHeight;
			watermarkWidth = maxWatermarkWidth;
			watermarkHeight = watermarkWidth / aspectRatio;
		}

		if (watermarkHeight > maxWatermarkHeight) {
			double aspectRatio = watermarkWidth / watermarkHeight;
			watermarkHeight = maxWatermarkHeight;
			watermarkWidth = watermarkHeight / aspectRatio;
		}

		return Pair.of(watermarkWidth, watermarkHeight);
	}

	/**
	 * 
	 * @param originalImage
	 * @param watermarkImage
	 * @param maxPercentage
	 * @return
	 */
	public static int getWatermarkWidth(BufferedImage originalImage,
			BufferedImage watermarkImage, double maxPercentage) {

		return calculateWatermarkDimensions(originalImage, watermarkImage,
				maxPercentage).getLeft().intValue();

	}

	/**
	 * 
	 * @param originalImage
	 * @param watermarkImage
	 * @param maxPercentage
	 * @return
	 */
	public static int getWatermarkHeight(BufferedImage originalImage,
			BufferedImage watermarkImage, double maxPercentage) {

		return calculateWatermarkDimensions(originalImage, watermarkImage,
				maxPercentage).getRight().intValue();

	}

And now we have our scaled logo, this time it’s aligned to middle-left:
Java watermark image

If you have a question or having trouble getting it to work then feel free to write me a comment and I’ll do my best to help you out. If you would like to read more about general Java related subjects then also make sure to comment on that and if you liked what you read then make sure to subscribe – It’s FREE!