{"id":22784090,"url":"https://github.com/alx/react-bounding-box","last_synced_at":"2025-04-15T18:41:13.748Z","repository":{"id":17210772,"uuid":"81273655","full_name":"alx/react-bounding-box","owner":"alx","description":"HTML Canvas to display bounding boxes on an image","archived":false,"fork":false,"pushed_at":"2022-12-10T17:27:33.000Z","size":10658,"stargazers_count":49,"open_issues_count":21,"forks_count":12,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T23:43:49.428Z","etag":null,"topics":["bounding-boxes","canvas","react"],"latest_commit_sha":null,"homepage":"https://alx.github.io/react-bounding-box/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-08T01:29:54.000Z","updated_at":"2024-11-15T04:24:17.000Z","dependencies_parsed_at":"2023-01-11T20:26:07.192Z","dependency_job_id":null,"html_url":"https://github.com/alx/react-bounding-box","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alx%2Freact-bounding-box","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alx%2Freact-bounding-box/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alx%2Freact-bounding-box/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alx%2Freact-bounding-box/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alx","download_url":"https://codeload.github.com/alx/react-bounding-box/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249130820,"owners_count":21217622,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bounding-boxes","canvas","react"],"created_at":"2024-12-11T22:11:22.353Z","updated_at":"2025-04-15T18:41:13.706Z","avatar_url":"https://github.com/alx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Bounding Box Component\n\nReact Bounding Box Component displays bounding boxes on an image inside and HTML Canvas.\n\n![Screenshot](https://raw.githubusercontent.com/alx/react-bounding-box/master/dist/screenshot.png)\n\nDemo: [https://alx.github.io/react-bounding-box/](https://alx.github.io/react-bounding-box/)\n\n## Usage\n\n```\n\u003cBoundingbox image={params.image}\n             boxes={params.boxes}\n             options={params.options}\n/\u003e\n```\n\n## Params\n\nCommented options are not yet implemented.\n\n```\n    const params = {\n      image: 'http://i.imgur.com/gF7QYwa.jpg',\n      boxes: [\n        // coord(0,0) = top left corner of image\n        //[x, y, width, height]\n        [0, 0, 250, 250],\n        [300, 0, 250, 250],\n        [700, 0, 300, 25],\n        [1100, 0, 25, 300]\n        // {coord: [0, 0, 250, 250], label: \"test\"},\n        // {coord: [300, 0, 250, 250], label: \"A\"},\n        // {coord: [700, 0, 300, 25], label: \"B\"},\n        // {coord: [1100, 0, 25, 300], label: \"C\"}\n      ],\n      options: {\n        colors: {\n          normal: 'rgba(255,225,255,1)',\n          selected: 'rgba(0,225,204,1)',\n          unselected: 'rgba(100,100,100,1)'\n        },\n        style: {\n          maxWidth: '100%',\n          maxHeight: '90vh'\n        }\n        //showLabels: false\n      }\n    };\n```\n\n## Segmentation\n\n![Segmentation](https://raw.githubusercontent.com/alx/react-bounding-box/master/public/assets/img/screenshot_segmentation.png)\n\n```\n\u003cBoundingbox image={params.image}\n             pixelSegmentation={params.segmentation}\n/\u003e\n```\n\nTo load segmentation data from a json file generated by [deepdetect](http://deepdetect.com) :\n\n```\n\u003cBoundingbox image={params.image}\n             segmentationJson={'./ADE_val_00000761.json'}\n/\u003e\n```\n\nWhen 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.**\n\nTo avoid this issue, the segmentation can be displayed side-by-side :\n\n```\n\u003cBoundingbox\n  image={'http://localhost/ADE_val_00000761.jpg'}\n  segmentationJson={'./ADE_val_00000761.json'}\n  separateSegmentation={true}\n/\u003e\n```\n\n![Segmentation Remote](https://raw.githubusercontent.com/alx/react-bounding-box/master/public/assets/img/screenshot_segmentation_separate.png)\n\n## Changelog\n\n### v0.5.19 - 09/06/2020\n\n* fix: disable pointer-events on segmentation canvas\n* fix: clean segCanvas when receiving new props\n* fix: check null on this.props.boxes in renderBoxes\n* fix: set boxes as empty array by default\n* fix: remove unused backup file\n\n### v0.5.14 - 14/02/2020\n\n* FIX: Image is not redrawn on update \n  [#15](https://github.com/alx/react-bounding-box/issues/15) - Thanks [@testower](https://github.com/testower)\n* FIX: display boxes when xmin/ymin on 0 value\n* FIX: split storybook stories to use state outside component\n* FIX: update `minimatch` and `serialize-javascript` dependencies - [@dependabot](https://github.com/dependabot)\n\n### v0.5.10 - 26/01/2020\n\n* FIX: segmentation is redrawn when nextProps.pixelSegmentation is updated\n\n### v0.5.9 - 23/01/2020\n\n* FIX: add missing redraw when resizing canvas after loading a new image\n* FIX: only resize canvas when loaded image change dimensions\n\n### v0.5.7 - 21/01/2020\n\n* FIX: use props.forceRedraw property to redraw canvas\n* FIX: replace array.some() method by classic for() loop\n* FIX: check new image dimension and data before to redraw it in canvas\n* FIX: update background width and height after loading a new image\n\n### v0.5.2 - 16/12/2019\n\n* Use absolute value to compute width and height from coordinates\n\n### v0.1.0 - 22/05/2018\n\n* Fix deprecated `React.PropTypes`\n\n### v0.0.14 - 30/01/2018\n* add image segmentation display available in [deepdetect](https://github.com/beniz/deepdetect/)\n\n### v0.0.11 - 14/03/2017\n* specific drawLabel prop function\n\n### v0.0.10 - 14/03/2017\n* new object model available inside boxes prop\n* change drawBox function prop to support box label\n\n### v0.0.9 - 16/02/2017\n* add drawBox function prop to customize how the box will be displayed\n\n### v0.0.8 - 16/02/2017\n* add selectedIndex and onSelected props to allow external modification/observation of selected bounding box\n\n### v0.0.7 - 15/02/2017\n* use react-cdk yeoman generator to make simple component and use storybook\n* eslint on bounding box component\n\n### v0.0.5 - 09/02/2017\n* add missing Boundingbox displayName\n\n### v0.0.4 - 09/02/2017\n* fix issue with canvas width/height on firefox\n\n### v0.0.3 - 09/02/2017\n* review options colors structure\n* options is optional, and defaultProps for colors\n\n### v0.0.2 - 09/02/2017\n* get image size with javascript\n\n### v0.0.1 - 08/02/2017\n* First commit\n* Simple example with mouse hover on boxes\n\n## History\n\n* 06/2016 - Inspiration: [DenseCap](http://cs.stanford.edu/people/karpathy/densecap/)\n* 09/2016 - First prototype in production: [recognition.tate.org.uk](http://recognition.tate.org.uk/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falx%2Freact-bounding-box","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falx%2Freact-bounding-box","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falx%2Freact-bounding-box/lists"}