Skip to content

Cropper

The Cropper constructor creates a new Cropper instance.

Usage

Syntax

js
new Cropper(element[, options])
  • element

    • Type: HTMLImageElement | HTMLCanvasElement | string
    • The target image or canvas element for cropping. If it is a string, will be passed into the document.querySelector to find the element.
  • options (optional)

    • Type: Object
    • The options for cropping.

Example

Details
vue
<template>
  <div class="cropper-container" />
</template>

<script lang="ts">
import Cropper from 'cropperjs';

const { BASE_URL } = import.meta.env;

export default {
  name: 'CropperExample',
  data() {
    return {
      src: `${BASE_URL}picture.jpg`,
    };
  },
  mounted() {
    const image = new Image();

    image.src = this.src;
    image.alt = 'Picture';

    const cropper = new Cropper(image, {
      container: '.cropper-container',
    });

    // eslint-disable-next-line no-console
    console.log(cropper);
  },
};
</script>

<style lang="scss" scoped>
.cropper-container {
  border: 1px solid var(--vp-c-divider);
  border-radius: 0.375rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
  padding: 1.25rem 1.5rem;

  :deep(cropper-canvas) {
    height: 360px;
  }
}
</style>

Options

NameTypeDefaultDescription
containerElement | stringDefaults to the parent element of the target element, or document.body if the parent element is null.The Cropper container. If it is a string, it will be passed into the document.querySelector to find the element.
templatestringDefaults to a built-in template, see below.The Cropper template.

The default template for the Cropper:

html
<cropper-canvas background>
  <cropper-image></cropper-image>
  <cropper-shade hidden></cropper-shade>
  <cropper-handle action="select" plain></cropper-handle>
  <cropper-selection initial-coverage="0.5" movable resizable>
    <cropper-grid role="grid" bordered covered></cropper-grid>
    <cropper-crosshair centered></cropper-crosshair>
    <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>

Instance Properties

NameTypeDescription
elementHTMLImageElement | HTMLCanvasElementThe normalized Cropper element.
optionsObjectThe normalized Cropper options.
containerElementThe normalized Cropper container.

Instance Methods

getCropperCanvas

  • Syntax: getCropperCanvas()
  • Alternative: cropper.container.querySelector('cropper-canvas')
  • Returns:
    • Type: CropperCanvas | null
    • The <cropper-canvas> element if any.

Get the <cropper-canvas> element in the Cropper container.

getCropperImage

  • Syntax: getCropperImage()
  • Alternative: cropper.container.querySelector('cropper-image')
  • Returns:
    • Type: CropperImage | null
    • The <cropper-image> element if any.

Get the <cropper-image> element in the Cropper container.

getCropperSelection

  • Syntax: getCropperSelection()
  • Alternative: cropper.container.querySelector('cropper-selection')
  • Returns:
    • Type: CropperSelection | null
    • The <cropper-selection> element if any.

Get the <cropper-selection> element in the Cropper container.

getCropperSelections

  • Syntax: getCropperSelections()
  • Alternative: cropper.container.querySelectorAll('cropper-selection')
  • Returns:
    • Type: NodeListOf<CropperSelection> | null
    • The <cropper-selection> element if any.

Get all the <cropper-selection> elements in the Cropper container when there are multiple selections.

Exported Modules

js
import {
  // Constants
  DEFAULT_TEMPLATE,

  // Elements
  CropperElement,
  CropperCanvas,
  CropperImage,
  CropperShade,
  CropperHandle,
  CropperSelection,
  CropperGrid,
  CropperCrosshair,
  CropperViewer,
} from 'cropperjs';

Released under the MIT License.