ImageFilter

Vaadin integrated image filtering component with 124 built-in image filters

This component comes to help when you have an image, but you need to adjust it a bit before displaying it. You can rotate, scale, add shadow or round corners, etc. With the help of excellent Java Image Filter package from JH Labs total 124 filters are available! And if these are not enough, you can always create custom filters using Java2D API.

Image component utilizes a stack to organize filters. It can be used to sort, revert and repeat the operations as needed. Also built-in caching can be turned on to make the reverting a very quick operation.

This is a server-side component extending Embedded so no client-side compilation is not needed.

NOTE: If you just need a light-weight client-side image scaling at the client side you might consider using the ImageScaler add-on instead. Follow the link at the side panel.

Dependenies: Copy the Filters.jar from JH Labs: http://www.jhlabs.com/ip/filters/index.html Compiled with Java 5 and Vaadin 6.2.3.

Sample code

        // Fit image into a 100x100 box
        op = FilterOperation.getByName(FilterOperation.FITINTO);
        FitIntoFilter fif = (FitIntoFilter) op.getFilter();
        fif.setHeight(100);
        fif.setWidth(100);
        image.addOperation(op);

        // Round corners
        op = FilterOperation.getByName(FilterOperation.ROUNDEDCORNERS);
        RoundedCornersFilter rcf = (RoundedCornersFilter) op.getFilter();
        rcf.setCornerRadius(9);
        image.addOperation(op);

        // Draw a thick line based on a corner radius.
        final int cornerRadius = 10;
        final int stroke = 10;
        image.addOperation(new AbstractDrawOperation() {

            @Override
            public void draw(Graphics2D g, BufferedImage srcImage) {
                g.setColor(Color.WHITE);
                g.fillRect(0, 0, srcImage.getWidth(), srcImage.getHeight());
                g.drawImage(srcImage, 0, 0, null);
                g.setColor(Color.BLACK);
                g.setStroke(new BasicStroke(stroke));
                int halfStroke = stroke / 2;
                g.drawRoundRect(0 + halfStroke - 1, 0 + halfStroke - 1,
                        srcImage.getWidth() - stroke + 1, srcImage.getHeight()
                                - stroke + 1, cornerRadius, cornerRadius);
            }
        });

        // Create transparent rounded corners
        op = FilterOperation
                .getByName(FilterOperation.ROUNDEDCORNERS);
        ((RoundedCornersFilter) op.getFilter()).setCornerRadius(cornerRadius);
        image.addOperation(op);

        // Remember to apply the filter stack
        image.applyOperations();

package com.example.test;

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;

import org.vaadin.imagefilter.AbstractDrawOperation;
import org.vaadin.imagefilter.FilterOperation;
import org.vaadin.imagefilter.Image;
import org.vaadin.imagefilter.filters.RoundedCornersFilter;

import com.jhlabs.image.BorderFilter;
import com.vaadin.Application;
import com.vaadin.ui.Window;

public class TestApplication extends Application {

    @Override
    public void init() {
        Window mainWindow = new Window("Test Application");

        // Load an image from a public URL and cache it. Caching is useful if
        // you revert and re-apply the filters.
        Image image = new Image(
                "http://www.streamhead.com/wp-content/uploads/2010/01/vaadin.png",
                true);
        mainWindow.addComponent(image);


        // Add some border around the original image
        FilterOperation op = FilterOperation.getByName(FilterOperation.BORDER);
        int borderWidth = 20;
        ((BorderFilter) op.getFilter()).setBottomBorder(borderWidth);
        ((BorderFilter) op.getFilter()).setTopBorder(borderWidth);
        ((BorderFilter) op.getFilter()).setLeftBorder(borderWidth);
        ((BorderFilter) op.getFilter()).setRightBorder(borderWidth);
        image.addOperation(op);


        // Draw a thick line based on a corner radius.
        final int cornerRadius = 10;
        final int stroke = 10;
        image.addOperation(new AbstractDrawOperation() {

            @Override
            public void draw(Graphics2D g, BufferedImage srcImage) {
                g.setColor(Color.WHITE);
                g.fillRect(0, 0, srcImage.getWidth(), srcImage.getHeight());
                g.drawImage(srcImage, 0, 0, null);
                g.setColor(Color.BLACK);
                g.setStroke(new BasicStroke(stroke));
                int halfStroke = stroke / 2;
                g.drawRoundRect(0 + halfStroke - 1, 0 + halfStroke - 1,
                        srcImage.getWidth() - stroke + 1, srcImage.getHeight()
                                - stroke + 1, cornerRadius, cornerRadius);
            }
        });

        // Create transparent rounded corners
        op = FilterOperation
                .getByName(FilterOperation.ROUNDEDCORNERS);
        ((RoundedCornersFilter) op.getFilter()).setCornerRadius(cornerRadius);
        image.addOperation(op);

        // Add a drop shadow using default values
        image.addOperation(FilterOperation.getByName(FilterOperation.DROPSHADOW));

        // Remember to apply the filter stack
        image.applyOperations();


        setMainWindow(mainWindow);
    }
}

        // Load an image from a public URL and cache it. Caching is useful if
        // you revert and re-apply the filters.
        Image image = new Image(
                "http://www.streamhead.com/wp-content/uploads/2010/01/vaadin.png",
                true);
        mainWindow.addComponent(image);

Links

• Online Demo
• Source Code
• Discussion Forum
• JH Labs Java Image Filters
• ImageScaler Add-on

Compatibility