ImageCrop

Use image crop as a client-side mechanism to crop images.

Alpha
Not reviewed for accessibility

On this page

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

A client-side mechanism to crop images.

Arguments

Name	Type	Default	Description
`src`	`String`	N/A	The path of the image to crop.
`rounded`	`Boolean`	`true`	If the crop mask should be a circle. Defaults to true.
`system_arguments`	`Hash`	N/A	System arguments

Slots

`loading`

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

Name	Type	Default	Description
`system_arguments`	`Hash`	N/A	System arguments

Examples

Simple cropper

<%= render(Primer::Alpha::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC)) %>

Square cropper

<%= render(Primer::Alpha::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC, rounded: false)) %>

Cropper with a custom loader

<%= render(Primer::Alpha::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC, rounded: false)) do |cropper| %>
  <% cropper.with_loading(style: "width: 120px").with_content("Loading...") %>
<% end %>

Edit this page on GitHub