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 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