CropperImage

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

Examples

Basic

TIP

The default width and height of this element is 0.

With image source

Properties

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

NameTypeDefaultOptionsDescription
rotatablebooleantrue-Indicates whether this element is rotatable.
scalablebooleantrue-Indicates whether this element is scalable.
skewablebooleantrue-Indicates whether this element is skewable.
slottablebooleanfalse-Indicates whether this element is slottable.
translatablebooleantrue-Indicates whether this element is translatable.

The built-in <img> element will inherit the following attributes by default:

  • alt
  • crossorigin
  • decoding
  • importance
  • loading
  • referrerpolicy
  • sizes
  • src
  • srcset

Methods

$ready

  • Syntax:

    • $ready()
    • $ready(callback)
  • Arguments:

    • callback:
      • Type: Function
      • The callback to execute after successfully loading the image.
  • Returns:

    • Type: Promise
    • A promise that resolves to the image element.
  • Example:

    const cropperImage = new CropperImage();
    
    cropperImage.$ready((image) => {
      console.log(image.naturalWidth, image.naturalHeight);
    });
    cropperImage.src = '/cropperjs/v2/picture.jpg';
    

Defers the callback to execute after successfully loading the image.

$center

  • Syntax:
    • $center()
    • $center(size)
  • Arguments:
    • size:
      • Type: string
      • Options: 'contain', and 'cover'.
      • The size of the image.
  • Returns:
    • Type: CropperImage
    • The element instance for chaining.

Aligns the image to the center of its parent element.

$move

  • Syntax:
    • $move(x)
    • $move(x, y)
  • Arguments:
    • x:
      • Type: number
      • The moving distance in the horizontal direction.
    • y:
      • Type: number
      • Default: x
      • The moving distance in the vertical direction.
  • Returns:
    • Type: CropperImage
    • The element instance for chaining.

Moves the image.

$moveTo

  • Syntax:
    • $moveTo(x)
    • $moveTo(x, y)
  • Arguments:
    • x:
      • Type: number
      • The new position in the horizontal direction.
    • y:
      • Type: number
      • Default: x
      • The new position in the vertical direction.
  • Returns:
    • Type: CropperImage
    • The element instance for chaining.

Moves the image to a specific position.

$rotate

  • Syntax: $rotate(angle)
  • Arguments:
    • angle:
      • Type: number | string
      • The rotation angle (in radians). The default unit is rad.
    • x:
      • Type: number
      • Default: The center of the image in the horizontal.
      • The rotation origin in the horizontal.
    • y:
      • Type: number
      • Default: The center of the image in the vertical.
      • The rotation origin in the vertical.
  • Returns:
    • Type: CropperImage
    • The element instance for chaining.
  • Examples:
    • $rotate(0.8)
    • $rotate('0.8rad')
    • $rotate('45deg')
    • $rotate('50grad')
    • $rotate('0.1turn')
    • $rotate('90deg', 0, 0)

Rotates the image. It is similar to CSS function rotate()open in new window or CanvasRenderingContext2D.rotate()open in new window.

$zoom

  • Syntax:

    • $zoom(scale)
    • $zoom(scale, x, y)
  • Arguments:

    • scale:
      • Type: number
      • The zoom factor. Positive numbers for zooming in, and negative numbers for zooming out.
    • x:
      • Type: number
      • Default: The center of the image in the horizontal.
      • The zoom origin in the horizontal.
    • y:
      • Type: number
      • Default: The center of the image in the vertical.
      • The zoom origin in the vertical.
  • Returns:

    • Type: CropperImage
    • The element instance for chaining.
  • Examples:

    cropperImage.$zoom(0.1); // Zoom in 10%
    cropperImage.$zoom(-0.1); // Zoom out 10%
    cropperImage.$zoom(0.1, 0, 0); // Zoom in from the top-left corner
    cropperImage.$zoom(-0.1, 0, 0); // Zoom out from the top-left corner
    

Zooms the image.

$scale

  • Syntax:

    • $scale(x)
    • $scale(x, y)
  • Arguments:

    • x:
      • Type: number
      • The scaling factor in the horizontal direction.
    • y:
      • Type: number
      • Default: x
      • The scaling factor in the vertical direction.
  • Returns:

    • Type: CropperImage
    • The element instance for chaining.
  • Examples:

    cropperImage.$scale(1.1); // Zoom in 10%
    cropperImage.$scale(0.9); // Zoom out 10%
    cropperImage.$scale(-1); // Flip both the horizontal and vertical directions
    cropperImage.$scale(-1, 1); // Flip the horizontal direction
    cropperImage.$scale(1, -1); // Flip the vertical direction
    

Scales the image. It is similar to CSS function scale()open in new window or CanvasRenderingContext2D.scale()open in new window.

$skew

  • Syntax:
    • $skew(x)
    • $skew(x, y)
  • Arguments:
    • x:
      • Type: number | string
      • The skewing angle in the horizontal direction. The default unit is rad.
    • y:
      • Type: number | string
      • Default: x
      • The skewing angle in the vertical direction. The default unit is rad.
  • Returns:
    • Type: CropperImage
    • The element instance for chaining.
  • Examples:
    • $skew(0.8)
    • $skew('0.8rad')
    • $skew('45deg')
    • $skew('50grad')
    • $skew('0.1turn')
    • $skew(0, 0.8)

Skews the image. It is similar to CSS function skew()open in new window.

$translate

  • Syntax:
    • $translate(x)
    • $translate(x, y)
  • Arguments:
    • x:
      • Type: number
      • The translating distance in the horizontal direction.
    • y:
      • Type: number
      • Default: x
      • The translating distance in the vertical direction.
  • Returns:
    • Type: CropperImage
    • The element instance for chaining.

Translates the image. It is similar to CSS function translate()open in new window or CanvasRenderingContext2D.translate()open in new window.

$transform

  • Syntax: $transform(a, b, c, d, e, f)
  • Arguments:
    • a:
      • Type: number
      • The scaling factor in the horizontal direction.
    • b:
      • Type: number
      • The skewing angle in the vertical direction.
    • c:
      • Type: number
      • The skewing angle in the horizontal direction.
    • d:
      • Type: number
      • The scaling factor in the vertical direction.
    • e:
      • Type: number
      • The translating distance in the horizontal direction.
    • f:
      • Type: number
      • The translating distance in the vertical direction.
  • Returns:
    • Type: CropperImage
    • The element instance for chaining.

Transforms the image. It is similar to CSS function matrix()open in new window or CanvasRenderingContext2D.transform()open in new window.

$setTransform

  • Syntax:
    • $setTransform(a, b, c, d, e, f)
    • $setTransform(a)
  • Arguments:
    • a:
      • Type: number | Array
      • The scaling factor in the horizontal direction, or the transformation matrix.
    • b:
      • Type: number
      • The skewing angle in the vertical direction.
    • c:
      • Type: number
      • The skewing angle in the horizontal direction.
    • d:
      • Type: number
      • The scaling factor in the vertical direction.
    • e:
      • Type: number
      • The translating distance in the horizontal direction.
    • f:
      • Type: number
      • The translating distance in the vertical direction.
  • Returns:
    • Type: CropperImage
    • The element instance for chaining.

Resets (overrides) the current transform to the specific identity matrix, and then invokes a transform described by the arguments of this method. This lets you scale, rotate, translate (move), and skew the context. It is similar to CanvasRenderingContext2D.setTransform()open in new window.

$getTransform

  • Syntax: $getTransform()
  • Returns:
    • Type: Array
    • The current transformation matrix of the element.

Retrieves the current transformation matrix being applied to the element. It is similar to CanvasRenderingContext2D.getTransform()open in new window.

$resetTransform

  • Syntax:
    • $resetTransform()
  • Alternatives:
    • $setTransform(1, 0, 0, 1, 0, 0)
    • $setTransform([1, 0, 0, 1, 0, 0])
  • Returns:
    • Type: CropperImage
    • The element instance for chaining.

Resets the current transform to the initial identity matrix. It is similar to CanvasRenderingContext2D.resetTransform()open in new window.

Events

transform

  • Event:
    • event.bubbles: true
    • event.cancelable: true
    • event.composed: true
    • event.detail:
      • Type: Object
      • The transform information of the image.
    • event.detail.matrix:
      • Type: Array
      • The new (next) matrix object.
    • event.detail.oldMatrix:
      • Type: Array
      • The old (current) matrix object.

The event is fired when the transformopen in new window CSS property of the element is going to change.

Slots

There are no available slots in this element.

You can enable the default slot by setting the slottable property to true:

<cropper-image slottable></cropper-image>