How to handle custom size in selection and cropping in React Image Editor?

This guide will walk you through the process of incorporating custom crop sizes when utilizing the React Image Editor application. Users may find it helpful to tailor the crop selection to their specific dimensions, and this article aims to provide step-by-step instructions for achieving that customization.

Solution

To address this requirement, we leverage the shapeChanging event to capture the custom cropping values provided by users. This event allows us to dynamically create the cropping selection with the specified height and width. To handle scenarios where users input invalid ranges, we include a condition within the same event to compare the dimensions of the current crop selection with those of the image. If the crop selection dimensions exceed those of the image, we automatically adjust them to ensure they fit within the image boundaries.

Below is the code snippet that demonstrates how to implement this solution:

import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';

function Default() {
    let imgObj;
    function imageEditorCreated() {
        imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png');
    }
    function shapeChanging(args) {
        if (args.name === "shapeChanging" && args.action === "insert" && args.currentShapeSettings.type === "CropCustom") {
            args.currentShapeSettings.height = args.currentShapeSettings.height > 500 ? 500 : args.currentShapeSettings.height;
            args.currentShapeSettings.width = args.currentShapeSettings.width > 500 ? 500 : args.currentShapeSettings.width;
        }
    }
    return (
        <div className='control-pane'>
            <div className='control-section'>
                <div className='row'>
                    <div className='col-lg-12 control-section'>
                        <div className='e-img-editor-sample'>
                            <ImageEditorComponent id='image-editor' ref={(img) => { imgObj = img; }} created={imageEditorCreated} shapeChanging={shapeChanging}>
                            </ImageEditorComponent>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}
export default Default;

Within the shapeChanging event, we first verify if the event is associated with a shape change related to a custom crop action. Upon confirmation, we proceed to compare the height and width of the currentShapeSettings with a predefined maximum value, in this instance, set to 500. Should the dimensions surpass this maximum value, we adjust them to be equal to the maximum; otherwise, we maintain the original dimensions.

Conclusion

By incorporating the aforementioned code, the Image Editor component becomes adept at managing and ensuring a seamless custom crop selection. This enhancement contributes to an improved user experience by delivering a more intuitive cropping functionality.

Live Demo

To see a live demonstration, visit the following StackBlitz link: Stackblitz example

Additional References

• Syncfusion Image Editor Documentation: ImageEditorComponent
• React Documentation: React Events
• JSX in React: Introducing JSX

Conclusion
I hope you enjoyed learning about how to handle custom size in selection and cropping in React Image Editor.

You can refer to our React Image Editor feature tour page to know about its other groundbreaking feature representations and documentations. You can also explore our React Image Editor example to understand how to present and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our React Diagram and other components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!