Documentation

Options

  • boundaryobject

    The outer container of the cropper

    Default will default to the size of the container
  • customClassstring

    A class of your choosing to add to the container to add custom styles to your croppie

    Default''
  • enableExifboolean

    Enable exif orientation reading. Tells Croppie to read exif orientation from the image data and orient the image correctly before rendering to the page.

    Requires exif.js

    Defaultfalse
  • enableOrientationboolean

    Enable or disable support for specifying a custom orientation when binding images (See bind method)

    Default false
  • enableResizeboolean

    Enable or disable support for resizing the viewport area.

    Default false
  • enableZoomboolean

    Enable zooming functionality. If set to false - scrolling and pinching would not zoom.

    Defaulttrue
  • enforceBoundaryboolean* Experimental

    Restricts zoom so image cannot be smaller than viewport

    Defaulttrue
  • mouseWheelZoombool/string

    Enable or disable the ability to use the mouse wheel to zoom in and out on a croppie instance. If 'ctrl' is passed mouse wheel will only work while control keyboard is pressed

    Defaulttrue
  • showZoomerboolean

    Hide or Show the zoom slider

    Defaulttrue
  • viewportobject

    The inner container of the coppie. The visible part of the image

    Default { width: 100, height: 100, type: 'square' }

    Valid type values:'square' 'circle'

Methods

  • get()object

    Get the crop points, and the zoom of the image.

  • bind({ url, points, orientation, zoom })Promise

    Bind an image to the croppie. Returns a promise to be resolved when the image has been loaded and the croppie has been initialized.

    Parameters
    • url URL to image
    • points Array of points that translate into [topLeftX, topLeftY, bottomRightX, bottomRightY]
    • zoom Apply zoom after image has been bound
    • orientation Custom orientation, applied after exif orientation (if enabled). Only works with enableOrientation option enabled (see 'Options').
      Valid options are:
      • 1 unchanged
      • 2 flipped horizontally
      • 3 rotated 180 degrees
      • 4 flipped vertically
      • 5 flipped horizontally, then rotated left by 90 degrees
      • 6 rotated clockwise by 90 degrees
      • 7 flipped horizontally, then rotated right by 90 degrees
      • 8 rotated counter-clockwise by 90 degrees
  • destroy()

    Destroy a croppie instance and remove it from the DOM

  • result({ type, size, format, quality, circle })Promise

    Get the resulting crop of the image.

    Parameters
    • type The type of result to return defaults to 'canvas'
    • 'base64' returns a the cropped image encoded in base64
    • 'html' returns html of the image positioned within an div of hidden overflow
    • 'blob' returns a blob of the cropped image
    • 'rawcanvas' returns the canvas element allowing you to manipulate prior to getting the resulted image
    • size The size of the cropped image defaults to 'viewport'
    • 'viewport' the size of the resulting image will be the same width and height as the viewport
    • 'original' the size of the resulting image will be at the original scale of the image
    • {width, height} an object defining the width and height. If only one dimension is specified, the other will be calculated using the viewport aspect ratio.
    • format Indicating the image format.
    • Default:'png'
    • Valid values:'jpeg'|'png'|'webp'
    • quality Number between 0 and 1 indicating image quality.
    • Default:1
    • circle force the result to be cropped into a circle
    • Valid Values:truefalse
  • rotate(degrees)

    Rotate the image by a specified degree amount. Only works with enableOrientation option enabled (see 'Options').

    • degrees Valid Values:90, 180, 270, -90, -180, -270
  • setZoom(value)

    Set the zoom of a Croppie instance. The value passed in is still restricted to the min/max set by Croppie.

    • value a floating point to scale the image within the croppie. Must be between a min and max value set by croppie.

Events

  • update(croppie)Croppie

    Triggered when a drag or zoom occurs

    
    $('.my-croppie').on('update.croppie', function(ev, cropData) {});
    // or
    document.getElementById('another-croppie').addEventListener('update', function(ev) { var cropData = ev.detail; });