Directory

croppie

Image Cropper - wrapps croppie for vaadin flow

View larger

Close

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);

Links

• Source Code
• Author Homepage

Compatibility