Skip to content

Migration

Options

Cropper.js 1.0Cropper.js 2.0
viewModeUse the <cropper-image> element's transform event to limit image boundaries, or use the <cropper-selection> element's change event to limit selection boundaries.
dragModeUse the <cropper-handle> element's action property.
initialAspectRatioUse the <cropper-selection> element's initialAspectRatio property.
aspectRatioUse the <cropper-selection> element's aspectRatio property.
dataUse the <cropper-image> element's $setTransform method, and the <cropper-selection> element's x, y, width, and height properties.
previewUse the <cropper-viewer> element.
responsiveDeprecated.
restoreDeprecated.
checkCrossOriginDeprecated.
checkOrientationDeprecated for performance reasons. As an alternative, it is recommended to use a third-party library, such as JavaScript-Load-Image.
modalUse the <cropper-shade> element.
guidesUse the <cropper-grid> element.
centerUse the <cropper-crosshair> element.
highlightUse the <cropper-action> element.
backgroundUse the <cropper-canvas> element's background property.
autoCropUse the <cropper-selection> element's initialCoverage property.
autoCropAreaUse the <cropper-selection> element's initialCoverage property.
movableUse the <cropper-image> element's translatable property.
rotatableUse the <cropper-image> element's rotatable property.
scalableUse the <cropper-image> element's scalable property.
zoomableDeprecated.
zoomOnTouchDeprecated.
zoomOnWheelDeprecated.
wheelZoomRatioUse the <cropper-canvas> element's scaleStep property.
cropBoxMovableUse the <cropper-selection> element's movable property.
cropBoxResizableUse the <cropper-selection> element's resizable property.
toggleDragModeOnDblclickUse the <cropper-handle> element's dblclick event to toggle action on dblclick.
minContainerWidthDeprecated.
minContainerHeightDeprecated.
minCanvasWidthUse the <cropper-canvas> element's min-width CSS property.
minCanvasHeightUse the <cropper-canvas> element's min-height CSS property.
minCropBoxWidthUse the <cropper-selection> element's min-width CSS property.
minCropBoxHeightUse the <cropper-selection> element's min-height CSS property.
readyUse the <cropper-image> element's $ready method.
cropstartUse the <cropper-canvas> element's actionstart event.
cropmoveUse the <cropper-canvas> element's actionmove event.
cropendUse the <cropper-canvas> element's actionend event.
cropUse the <cropper-canvas> element's action event.
zoomUse the <cropper-canvas> element's action event.

Methods

Cropper.js 1.0Cropper.js 2.0
cropUse the <cropper-selection> element's $change method.
resetUse the <cropper-image> element's $resetTransform method, and the <cropper-selection> element's $reset method.
clearUse the <cropper-selection> element's $reset method and hidden property.
replaceUse the <cropper-image> element's src property.
enableUse the <cropper-canvas> element's disabled property.
disableUse the <cropper-canvas> element's disabled property.
destroyDeprecated. Drops all the Cropper elements from the DOM directly.
moveUse the <cropper-image> element's $move method.
moveToUse the <cropper-image> element's $moveTo method.
zoomUse the <cropper-image> element's $scale method.
zoomToUse the <cropper-image> element's $setTransform method.
rotateUse the <cropper-image> element's $rotate method.
rotateToUse the <cropper-image> element's $setTransform method.
scaleUse the <cropper-image> element's $scale method.
scaleXUse the <cropper-image> element's $scale method.
scaleYUse the <cropper-image> element's $scale method.
getDataUse the <cropper-image> element's $getTransform method, and the <cropper-selection> element's x, y, width, and height properties.
setDataUse the <cropper-image> element's $setTransform method, and the <cropper-selection> element's x, y, width, and height properties.
getContainerDataDeprecated.
getImageDataUse the <cropper-image> element's $getTransform method.
getCanvasDataDeprecated.
setCanvasDataDeprecated.
getCropBoxDataUse the <cropper-selection> element's x, y, width, and height properties.
setCropBoxDataUse the <cropper-selection> element's x, y, width, and height properties.
getCroppedCanvasUse the <cropper-selection> element's $toCanvas method.
setAspectRatioUse the <cropper-selection> element's aspectRatio property.
setDragModeUse the <cropper-handle> element's action property.

Events

Cropper.js 1.0Cropper.js 2.0
readyUse the <cropper-image> element's $ready method.
cropstartUse the <cropper-canvas> element's actionstart event.
cropmoveUse the <cropper-canvas> element's actionmove event.
cropendUse the <cropper-canvas> element's actionend event.
cropUse the <cropper-canvas> element's action event.
zoomUse the <cropper-canvas> element's action event.

Released under the MIT License.