How to crop the image node in React Diagram?

Syncfusion® React Diagram component offers support for fixed user handles that can be attached to nodes. These handles enable real-time image editing through integration with the Image Editor tool. By listening for the fixedUserHandleClick event, we can trigger a dialog to open, granting users access to the Image Editor for modifying the image content within the node.

let nodes = [
 {
   id: 'node1',
   offsetX: 600,
   offsetY: 250,
   height: 200,
   width: 200,
   shape: {
     type: 'Image',
     source:
       'https://ej2.syncfusion.com/javascript/demos/src/image-editor/images/profile.png',
   },
   // A fixed user handle is created and stored in fixed user handle collection of Node.
   fixedUserHandles: [
     {
       offset: { x: 1, y: 1 },
       margin: { left: 20 },
       width: 20,
       height: 20,
       pathData:
         'M5.86,5.07 L9.28,9.01 L5.67,13.13 C5.42,13.41,5.13,13.55,4.81,13.55 C4.49,13.55,4.2,13.42,3.96,13.16 L3.44,13.75 L0,13.75 L2.25,11.18 C2,10.9,1.88,10.58,1.88,10.21 C1.88,9.84,2,9.5,2.25,9.2 Z M10.78,4.25 C10.8,0,10.83,0,10.85,0 C11.15,-0.02,11.42,0.11,11.67,0.39 L13.41,2.34 C13.64,2.65,13.75,2.98,13.75,3.35 C13.75,3.72,13.64,4.04,13.41,4.33 L9.88,8.35 L6.43,4.42 L9.96,0.39 C10.2,0.13,10.47,0,10.78,4.25 Z ',
     },
   ],
 },
];

At initialization, an image node is created with an image loaded from a specified URL. Alongside, a user handle is integrated into the node, serving as an editor tool for interactive editing. Clicking on this editing tool prompts the display of a dialog box. Within this dialog, the Image Editor component is initialized, enabling users to perform a variety of editing operations on the profile picture.

fixedUserHandleClick: function (args) {
   dialogObj.show();
   var imageEditor = ej.base.getComponent(
     document.getElementById('image-editor'),
     'image-editor'
   );
   var canvas = document.querySelector('#img-canvas');
   imageEditor.open(canvas.toDataURL());
 },

After opening the image editor, users can customize and crop the image as needed. Once satisfied with the adjustments, they can click the ‘Apply’ button. This action will render the newly cropped image in the node, reflecting the changes made in the editor.

click: function () {
       var imageEditor = ej.base.getComponent(
         document.getElementById('image-editor'),
         'image-editor'
       );
       imageEditor.crop();
       var croppedData = imageEditor.getImageData();
       var canvas = document.querySelector('#img-canvas');
       var base64 = canvas.toDataURL();
       var ctx = canvas.getContext('2d');
       var parentDiv = document.querySelector('.e-profile');
       var tempCanvas = parentDiv.appendChild(ej.base.createElement('canvas'));
       var tempContext = tempCanvas.getContext('2d');
       tempCanvas.width = croppedData.width;
       tempCanvas.height = croppedData.height;
       tempContext.putImageData(croppedData, 0, 0);
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       ctx.drawImage(tempCanvas, 0, 0, canvas.width, canvas.height);
       tempCanvas.remove();
       parentDiv.style.borderRadius = '100%';
       canvas.style.backgroundColor = '#fff';
       dialogObj.hide();
       setTimeout(function () {
         var canvas = document.querySelector('#img-canvas');
         var base64 = canvas.toDataURL();
         diagram.nodes[0].shape.source = base64.toString();
       }, 0);
      
     },

The above retrieves the cropped data, and applies it to the original canvas displaying the profile picture. The edited image is updated as a source of node shape in a base64 format.
Refer the working sample for the reference

Sample

Conclusion

I hope you enjoyed learning about how to crop the image node in React diagram.

You can refer to our React Diagram feature tour page to know about its other groundbreaking feature representations and documentations. You can also explore our React Diagram 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!