React Bounding Box Component displays bounding boxes on an image inside and HTML Canvas.

Demo: https://alx.github.io/react-bounding-box/

<Boundingbox image={params.image}
             boxes={params.boxes}
             options={params.options}
/>

Commented options are not yet implemented.

    const params = {
      image: 'http://i.imgur.com/gF7QYwa.jpg',
      boxes: [
        // coord(0,0) = top left corner of image
        //[x, y, width, height]
        [0, 0, 250, 250],
        [300, 0, 250, 250],
        [700, 0, 300, 25],
        [1100, 0, 25, 300]
        // {coord: [0, 0, 250, 250], label: "test"},
        // {coord: [300, 0, 250, 250], label: "A"},
        // {coord: [700, 0, 300, 25], label: "B"},
        // {coord: [1100, 0, 25, 300], label: "C"}
      ],
      options: {
        colors: {
          normal: 'rgba(255,225,255,1)',
          selected: 'rgba(0,225,204,1)',
          unselected: 'rgba(100,100,100,1)'
        },
        style: {
          maxWidth: '100%',
          maxHeight: '90vh'
        }
        //showLabels: false
      }
    };

<Boundingbox image={params.image}
             pixelSegmentation={params.segmentation}
/>

To load segmentation data from a json file generated by deepdetect :

<Boundingbox image={params.image}
             segmentationJson={'./ADE_val_00000761.json'}
/>

When you want to display the segmentation of an image not hosted in the same domain as your react app, you'll find the following error: Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

To avoid this issue, the segmentation can be displayed side-by-side :

<Boundingbox
  image={'http://localhost/ADE_val_00000761.jpg'}
  segmentationJson={'./ADE_val_00000761.json'}
  separateSegmentation={true}
/>

• fix: disable pointer-events on segmentation canvas
• fix: clean segCanvas when receiving new props
• fix: check null on this.props.boxes in renderBoxes
• fix: set boxes as empty array by default
• fix: remove unused backup file

• FIX: Image is not redrawn on update #15 - Thanks @testower
• FIX: display boxes when xmin/ymin on 0 value
• FIX: split storybook stories to use state outside component
• FIX: update minimatch and serialize-javascript dependencies - @dependabot

• FIX: segmentation is redrawn when nextProps.pixelSegmentation is updated

• FIX: add missing redraw when resizing canvas after loading a new image
• FIX: only resize canvas when loaded image change dimensions

• FIX: use props.forceRedraw property to redraw canvas
• FIX: replace array.some() method by classic for() loop
• FIX: check new image dimension and data before to redraw it in canvas
• FIX: update background width and height after loading a new image

• Use absolute value to compute width and height from coordinates

• Fix deprecated React.PropTypes

• add image segmentation display available in deepdetect

• specific drawLabel prop function

• new object model available inside boxes prop
• change drawBox function prop to support box label

• add drawBox function prop to customize how the box will be displayed

• add selectedIndex and onSelected props to allow external modification/observation of selected bounding box

• use react-cdk yeoman generator to make simple component and use storybook
• eslint on bounding box component

• add missing Boundingbox displayName

• fix issue with canvas width/height on firefox

• review options colors structure
• options is optional, and defaultProps for colors

• get image size with javascript

• First commit
• Simple example with mouse hover on boxes

• 06/2016 - Inspiration: DenseCap
• 09/2016 - First prototype in production: recognition.tate.org.uk