How to Crop the Image Node in JavaScript Diagram?

In Syncfusion® JavaScript Diagram, you can create nodes with an image source and add fixed user handles to the nodes to perform custom actions when clicked. The following sample code demonstrates how to create an image node with fixed user handles.

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 ',
    },
  ],
},
]; 

When a user clicks a fixed user handle, it triggers the fixedUserHandleClick event in the diagram, opening the ImageEditor component for editing the image.

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());
}, 

Within the ImageEditor, the following tools are provided to enhance the image:

• Open: Allows users to upload a new image from their local file system, providing flexibility to replace the existing image.
• Reset: Enables users to revert the image to its original state, discarding any modifications for re-editing.
• Rotate: Rotates the image by 90 degrees, allowing users to adjust its orientation to meet design requirements.
• Apply: Saves the cropped or edited image and updates it as the new source for the image node in the diagram, ensuring seamless integration.

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 steps retrieve the cropped data and apply it to the original canvas, displaying the updated profile image. The edited image is saved as the node’s shape source in base64 format, allowing it to display correctly within the diagram. Refer to the working sample for additional details and implementation.

Sample

Conclusion
I hope you enjoyed learning how to crop the image node in JavaScript Diagram.

You can refer to our JavaScript Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Diagram example to understand how to create 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 other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!