Directory

← Back

live-image-editor

A Vaadin component for image editing on the client side

Author

Rating

Popularity

<100

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

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Updated to Vaadin 8.7.0

Released
2019-02-13
Maturity
TESTED
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.4+
Vaadin 8.6+
Vaadin 8.0+ in 2.0
Browser
N/A

live-image-editor - Vaadin Add-on Directory

A Vaadin component for image editing on the client side live-image-editor - Vaadin Add-on Directory
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.
Online