CropperViewer

The CropperViewer interface provides properties and methods for manipulating the layout and presentation of <cropper-viewer> elements.

Examples

Basic

:::live-demo

html

<cropper-viewer></cropper-viewer>

:::

:::tip The default height of this element is 0. :::

Connect to CropperSelection

:::live-demo

html

<cropper-canvas style="height: 240px;" background>
  <cropper-image src="/cropperjs/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
  <cropper-shade hidden></cropper-shade>
  <cropper-handle action="select" plain></cropper-handle>
  <cropper-selection id="cropperSelection" initial-aspect-ratio="1.5" initial-coverage="0.5" movable resizable>
    <cropper-handle action="move" theme-color="rgba(255, 255, 255, 0.35)"></cropper-handle>
    <cropper-handle action="n-resize"></cropper-handle>
    <cropper-handle action="e-resize"></cropper-handle>
    <cropper-handle action="s-resize"></cropper-handle>
    <cropper-handle action="w-resize"></cropper-handle>
    <cropper-handle action="ne-resize"></cropper-handle>
    <cropper-handle action="nw-resize"></cropper-handle>
    <cropper-handle action="se-resize"></cropper-handle>
    <cropper-handle action="sw-resize"></cropper-handle>
  </cropper-selection>
</cropper-canvas>

<div class="cropper-viewers">
  <cropper-viewer selection="#cropperSelection" style="width: 320px;"></cropper-viewer>
  <cropper-viewer selection="#cropperSelection" style="width: 160px;"></cropper-viewer>
  <cropper-viewer selection="#cropperSelection" style="width: 80px;"></cropper-viewer>
  <cropper-viewer selection="#cropperSelection" style="width: 40px;"></cropper-viewer>
</div>

<style>
.cropper-viewers {
  margin-top: 0.5rem;
}

.cropper-viewers > cropper-viewer {
  border: 1px solid var(--vp-c-divider);
  display: inline-block;
  margin-right: 0.25rem;
}
</style>

:::

Properties

Inherits properties from its parent, CropperElement, and implements the following properties:

Name	Type	Default	Options	Description
resize	`string`	`"vertical"`	`"both"`, `"horizontal"`, `"vertical"`, `"none"`	Indicates whether this element is resizable, and if so, in which directions.
selection	`string`	`""`	-	Indicates the source selection to view. It must be a valid selector for `document.querySelector`.
slottable	`boolean`	`false`	-	Indicates whether this element is slottable.

Slots

There are no available slots in this element.

You can enable the default slot by setting the slottable property to true:
html
<cropper-viewer slottable></cropper-viewer>