Toast UI Image Editor

A simple and beautiful image editor for flow

The Toast UI Image editor is a simple and beautiful Image Editor that is perfect for everyday use.

This port currently offers some basic functionalities of the actual editor. More features may follow.

Sample code

@Route("")
public class View extends FlexLayout {
    private final ToastUiImageEditor toastUiImageEditor;
    private final Button load;
    private final Button store;

    public View() {
        getStyle().set("flex-direction","column");
        setSizeFull();
        setAlignItems(Alignment.CENTER);
        toastUiImageEditor = new ToastUiImageEditor();
        toastUiImageEditor.setHeight("1000px");
        toastUiImageEditor.setWidth("1100px");
        toastUiImageEditor.setInitMenu("filter");
        toastUiImageEditor.setTheme(ToastUiImageEditorTheme.whiteTheme);
        toastUiImageEditor.setMenuBarPosition("bottom");
        add(toastUiImageEditor);
        load = new Button("Load", buttonClickEvent -> {
            try {
                byte[] bytes = Files.readAllBytes(Paths.get(this.getClass().getClassLoader().getResource("test-image.png").toURI()));
                toastUiImageEditor.setImage(bytes);
            } catch (IOException | URISyntaxException e) {
                e.printStackTrace();
            }
        });
        add(load);
        store = new Button("Store", buttonClickEvent ->
                toastUiImageEditor.getImage(bytes -> {
                    try {
                        FileOutputStream stream = new FileOutputStream(System.getProperty("user.dir") + "/"+"test.png");
                        stream.write(bytes);
                        stream.close();
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                })
        );
        add(store);
    }

}

Links

• Online Demo
• View on GitHub

Compatibility