Directory

← Back

croppie

Image Cropper - wrapps croppie for vaadin flow

Author

Rating

Popularity

100+

Image Cropper that has many options to configure. Wrapps croppie and allows to control each options.

Features:

  • Square, Circle cropping
  • Viewport + Boundary support
  • tons of configurations
  • fluent API

Sample code

Croppie reindeerCropper = new Croppie("frontend/hero-reindeer.jpg")
                .withViewport(new ViewPortConfig(150, 200, ViewPortType.SQUARE))
                .withShowZoomer(false);
        add(reindeerCropper);
new Croppie(new CorsProxyResource("photo-1474827650307-5aeff1907b88.jpeg", "https://images.unsplash.com/photo-1474827650307-5aeff1907b88?auto=format&fit=crop&w=1052&q=80"))
                .withEnableResize(true)
                .withBoundary(new SizeConfig(600, 400))
Croppie croppie = new Croppie("frontend/rocketbase-brand-logo.jpg")
                .withConfig(CroppieConfiguration.builder()
                        .viewport(new ViewPortConfig(200, 200, ViewPortType.CIRCLE))
                        .boundary(new SizeConfig(250, 250))
                        .points(new CropPoints(406, 173, 571, 338))
                        .build())
                .withLabel("Croppie");
        croppie.addClassName("font-size-xs");

        croppie.addCropListener(e -> {
            eventLog.setValue(e.toString() + ", isFromClient=" + e.isFromClient() + "\n" + eventLog.getValue());
        });
        add(croppie);

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

  • removed some console.logs
Released
2019-04-12
Maturity
BETA
License
MIT License

Compatibility

Framework
Vaadin 10+
Browser
Firefox
Opera
Safari
Google Chrome
Internet Explorer
Internet Explorer
Microsoft Edge

croppie - Vaadin Add-on Directory

Image Cropper - wrapps croppie for vaadin flow croppie - Vaadin Add-on Directory
Image Cropper that has many options to configure. Wrapps [croppie](http://foliotek.github.io/Croppie/) and allows to control each options. Features: * Square, Circle cropping * Viewport + Boundary support * tons of configurations * fluent API
Online