Creates a new CropArea for the specified target image.
// create an instance of CropArea and pass the target image reference as a parameter
let cropArea = new cropro.CropArea(document.getElementById('myimg'));
image object to crop.
Aspect ratio options. Displayed in the aspect ratio dropdown. When only one option is specified the aspect ratio button is hidden.
Display mode.
inline for cropping right on top of the original image,
popup for a full-screen experience.
Margin in pixels between CROPRO popup UI and window borders.
When set to true resulting image will be rendered at the natural (original) resolution of the target image. Otherwise (default), screen dimensions of the image are used.
When set and renderAtNaturalSize is false sets the height of the rendered image.
Both renderWidth and renderHeight have to be set for this to take effect.
When rendering engine/format supports it (jpeg, for example), sets the rendering quality for the resulting image.
In case of image/jpeg the value should be between 0 (worst quality) and 1 (best quality).
Type of image for the rendering result. Eg. image/png (default) or image/jpeg.
When set the total area of the rendered image (width * height) will be limited to the specified value. The rendered image width and height will be scaled down proportionally to fit the specified size.
When set and renderAtNaturalSize is false sets the width of the rendered image.
Both renderWidth and renderHeight have to be set for this to take effect.
Manage style related settings via the styles property.
targetRoot is used to set an alternative positioning root for the UI.
This is useful in cases when your target image is positioned, say, inside a div with position: relative;
// set targetRoot to a specific div instead of document.body
cropArea.targetRoot = document.getElementById('myRootElement');
Base height of the toolbar block in pixels.
If set, the UI will be offset by the specified number of pixels on the left.
If set, the UI will be offset by the specified value.
Use this if you want to control the position inside a
position: relative parent (for example), as auto-calculation
will calculate available space from the relative
container and not the whole page.
Common usage when used with a relatively positioned parent would be:
cropArea.targetRoot = document.getElementById('relativeParent');
cropArea.uiOffsetTop = -10;
Currently active aspect ratio.
Currently active aspect ratio.
Number of grid lines in the alignment grid.
Number of grid lines in the alignment grid.
Get whether alignment grid is visible. When set to true alignment grid is shown, hidden otherwise.
Get whether alignment grid is visible. When set to true alignment grid is shown, hidden otherwise.
Returns true when CropArea is open and false otherwise.
Rotation angle of the original image with the crop area.
Rotation angle of the original image with the crop area.
Get whether zoom-to-crop feature is enabled. Set to true to enable zooming to crop area all the time. When set to false the whole image is shown and cropping is done within it.
Get whether zoom-to-crop feature is enabled. Set to true to enable zooming to crop area all the time. When set to false the whole image is shown and cropping is done within it.
Add a close event handler to perform actions in your code after the user
clicks on the close button (without saving).
close event listener
Add a render event listener which is called when user clicks on the OK/save button
in the toolbar.
// register an event listener for when user clicks OK/save in the UI
cropArea.addRenderEventListener(dataUrl => {
// we are setting the cropping result to replace our original image on the page
// but you can set a different image or upload it to your server
document.getElementById('myimg').src = dataUrl;
});
This is where you place your code to save a resulting image and/or CropAreaState.
a method handling rendering results
Add a statechange event handler to perform actions in your code after
the state of the CropArea changes.
state change event listener
Closes the CropArea UI.
Returns the complete state for the CropArea that can be preserved and used to continue cropping next time.
Remove a close event handler.
previously registered close event handler.
Remove a render event handler.
previously registered render event handler.
Remove a statechange event handler.
previously registered statechange event handler.
Renders previously saved state without user intervention.
The rendered image is returned to the render event handlers (as in the regular interactive process).
Rendering options set on CropArea are respected.
state to render
Restores CropArea state to continue previous cropping session.
IMPORTANT: call restoreState() after you've opened the CropArea with show.
this.cropArea1.show();
if (this.currentState) {
this.cropArea1.restoreState(this.currentState);
}
previously saved state object.
Initializes the CropArea and opens the UI.
Initiates rendering of the cropped image.
Add an event listener for the render event via addRenderEventListener
to get the rendering result.
Generated using TypeDoc
Main CROPRO class.
Simple usage example: