live-image-editor

A Vaadin component for image editing on the client side

View larger

Close

An image editor component that allows users editing images on the client side. Editing is done by performing transformations over the original image on the client side. No requests to the server are done while manipulating the image.

Supported transformations: Crop, scale, rotate.

Final users can edit the image with the mouse. Crop is done against a fixed crop border by dragging the image. Dragging while keeping the SHIFT key down, rotates the image. Scaling is done by using the mouse wheel.

Sample code

// - Create a new instance and specify an ImageReceiver:
private LiveImageEditor imageEditor = new LiveImageEditor(inputStream -> {
    //... process the image data as required (for example, saving it to a file system)
});

// - Set the image to be edited:
imageEditor.setImage(byteArray);

// - Request the image, for example, when a button is clicked:
Button send = new Button("Send the image to the server", event -> {
    imageEditor.requestEditedImage();
    // after this, the image data will be sent to the configured ImageReceiver.
});

// - Optionally, configure the ImageEditor instance:
imageEditor.setWidth(100, Unit.PERCENTAGE);
imageEditor.setBackgroundColor(0, 52, 220); // r, g, b
imageEditor.setRotate(0.785); // in radians
imageEditor.setScale(2.0); // make it twice the original size
imageEditor.setTranslateX(0.5); // 50% to the right
imageEditor.setTranslateY(0.25); // 25% down

Links

• Author Homepage
• Issue Tracker
• Source Code

Compatibility