ImageTool - Basic Usage Example

Example Code

// Import the library (in a module environment)
// import ImageTool from 'image-tool';

// Initialize the tool on an image
const imageTool = new ImageTool({
  imageElement: document.getElementById('demoImage'),
  onChange: (data) => {
    // Display updated data
    document.getElementById('output').textContent = 
      JSON.stringify(data, null, 2);
  }
});

// Enable/disable focus point
document.getElementById('toggleFocusPoint').addEventListener('click', () => {
  imageTool.toggleFocusPoint();
});

// Enable/disable crop zone
document.getElementById('toggleCropZone').addEventListener('click', () => {
  imageTool.toggleCropZone();
});

// Center the focus point
document.getElementById('centerFocusPoint').addEventListener('click', () => {
  const dimensions = imageTool.getImageDimensions();
  imageTool.setFocusPoint(
    dimensions.width / 2,
    dimensions.height / 2
  );
});

// Reset the crop zone
document.getElementById('resetCropZone').addEventListener('click', () => {
  const dimensions = imageTool.getImageDimensions();
  const width = dimensions.width / 2;
  const height = dimensions.height / 2;
  imageTool.setCropZone(
    (dimensions.width - width) / 2,
    (dimensions.height - height) / 2,
    width,
    height
  );
});