ResizableCropper Demo - @liwe3/webcomponents

A simplified container for resizing and cropping images. Use the corner handle to scale, side handles to crop, and drag the image to reposition it.

Interactive Demo

Width: Height: Min Width: Min Height: Aspect Ratio: Allow Resize Allow Rotate Allow Crop Allow Drag Disabled

Component State:

Wrapper Width: 300px

Wrapper Height: 200px

Wrapper Left: 0px

Wrapper Top: 0px

Content Width: -px

Content Height: -px

Content Left: 0px

Content Top: 0px

Zoom: 1.00x

Last Action: -

Different Aspect Ratios

Free Resize (No Aspect Ratio)

16:9 Aspect Ratio

1:1 (Square) Aspect Ratio

Control Options

Resize Only (No Crop)

Crop Only (No Resize)

Pan Only (No Resize/Crop)

Usage Instructions

Scale (Resize Everything): Drag the round corner handle (bottom-right) to resize both the wrapper and image together. Everything scales proportionally.
Crop (Resize Visible Area): Drag the bottom or right bar handles to resize only the wrapper (visible area). The image stays the same size but you see more or less of it.
Pan (Move Image): Click and drag directly on the image to move it around within the cropped area. Only works when the image is larger than the visible area.
Aspect Ratio: When set, both scaling and cropping operations maintain the specified ratio.
Min Width/Height: Prevents the wrapper from being resized below these values.
Allow Resize: Toggles the visibility of the scale handle (corner). Default: true.
Allow Crop: Toggles the visibility of the crop handles (sides). Default: true.
Disabled: When enabled, all handles disappear and interactions are disabled.

Workflow: Use the corner handle to scale everything, use the side handles to crop, and drag the image to position it perfectly!

Events & Methods

Events

The component dispatches custom events:

rcw:scale-start - Fired when scaling begins
rcw:crop-start - Fired when cropping begins
rcw:pan-start - Fired when panning/dragging the image begins
rcw:change - Fired during and after drag operations with current state
change - Fired with complete values (wrapperWidth, wrapperHeight, contentWidth, contentHeight, contentLeft, contentTop, zoom)

Methods

Public API methods:

getValues() - Returns an object with all current values including zoom level
setValues(values) - Sets the component state to reproduce size, zoom and pan

Try the buttons above to test getValues() and setValues()!

Check the browser console to see event logs.