Skip to content
This component requires JavaScript to function. Please refer to the Installation section to set it up.

A client-side mechanism to crop images.

Arguments

NameTypeDefaultDescription
srcStringN/AThe path of the image to crop.
roundedBooleantrueIf the crop mask should be a circle. Defaults to true.
system_argumentsHashN/ASystem arguments

Slots

Loading

A loading indicator that is shown while the image is loading.

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments

Examples

Simple cropper

<%= render(Primer::ImageCrop.new(src: "https://github.com/koddsson.png")) %>

Square cropper

<%= render(Primer::ImageCrop.new(src: "https://github.com/koddsson.png", rounded: false)) %>

Cropper with a custom loader

Loading...
<%= render(Primer::ImageCrop.new(src: "https://github.com/koddsson.png", rounded: false)) do |cropper| %>
<% cropper.loading(style: "width: 120px").with_content("Loading...") %>
<% end %>