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 exmample), 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 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 releated 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.
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 alginment grid is visible. When set to true alignment grid is shown, hidden otherwise.
Get whether alginment 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
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.
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: