I get this error whenever i try to load in the inital project, with the standard props defined in the npm module.

Can anybody help with this

Is there a way to center an image vertically and horizontally?
Also I think it would be good to reset the pan to center when resetting the zoom via zoom tool. The zoom should also prevent having a negative zoom, cause I honestly think there is no use case for zooming it out too much since the library already rescale the image to fit it in the view port.

Bottom right corner. Just to indicate that it's loading and no errors occurred.

I would like to render custom react-components instead of images. Any easy way to achieve this?

When an image is loaded in full pixel segmentation mode, it should show an error if the CORs header wasn't present (right now, a blank image/no image will be displayed)

component does nothing when image is downloading on web page. It's very ambiguous, experience when images are 20+ MB in sizes.

Please add a license to the project, preferably one that allows for commercial use. Thanks!

Make the scroll behavior configurable in settings to allow Scroll to Pan.

Hi, @seveibar I just checked out your project. It looks great, I need some help.

I have few doubts

• when I draw a region, I only have the option to select from the existing classes and tags, I wanted to know if there was an option to manually enter something in the text field and classify a region?

• In the regions object 'x','y','w' and 'h' values are less than the actual image size, how do I get the actual coordinates? should I multiply 'x' with the width of the image, 'y' with the height of the image, 'w' with the width of the image, and 'h' with the height of the image?

Thanks

Hi, i can't load image into react image annotate component. It works only when i initial it by state. When i fetch list image in componentDidMount then render, it did not work.

class App extends React.Component {
  state = {
    data: [
      {
          "src": "https://images.unsplash.com/photo-1501426026826-31c667bdf23d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80",
          "name": "Image 2"
      },
      {
          "src": "https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
          "name": "Image 3"
      },
      {
          "src": "https://images.unsplash.com/photo-1484100356142-db6ab6244067?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1262&q=80",
          "name": "Image 4"
      }
  ]
  };

  async getData()  {
    const result = await axios({
      url: "http://127.0.0.1:5000/api/images",
    }
    );
    this.setState({
      data: result.data.images
    });
  }
  componentDidMount() {
    this.getData();
  }

  // Putting that data to use
  render() {
    const { data } = this.state;
    return (
        <ReactImageAnnotate
          taskDescription="Draw."
          images= {data} 
          regionClsList={["Man Face", "Woman Face"]}
          onExit={output => {
            console.log(JSON.stringify(output));
          }}
        />
    );
  }
}

#31

This seems to break images completely. I only started looking at the codebase today, so please take this with a pinch of salt.

If videoTime is 0, which it is by default, then === undefined will not by true and the video tag will always render instead of the img tag.

Hey, could you please include a link to the npm package. And great job on the demo!!!

Thanks!
Jordan

Hi, I am trying to include your Component in a React project of mine.

Running "@material-ui/core": "^4.3.1",

Getting the following errors:

./node_modules/react-image-annotate/Theme/index.js
Module not found: Can't resolve '@material-ui/core/styles/MuiThemeProvider' in '.../node_modules/react-image-annotate/Theme'

When I go back to a Version 3.9.3 of @material-ui the MuiThemeProvider is found.
But the @material-ui/lab/Slider dependency from material-survey will be lost.

Can't resolve '@material-ui/lab/Slider' in '.../node_modules/material-survey/components/RatingQuestion'

Or it may be related to this

Any suggestions?

Hi. I'm Can't Click Setting Button into react image annotate component.


this is code me

Hi! Would it be possible to include an example of how to download the annotations from the webpage. It would be great to be see a clear example on how to access the annotations, and download as a json.

Thanks!

Hi, I'm pretty new to react so this is may be something I'm doing wrong on my end, but I wrapped ReactImageAnnotate component in my own component, update the state on a button click callback, and feed the state's values back into image_url and images props - but the UI doesn't update with my new images. I simply got started by doing npm create-react-app and then npm install react-image-annotate

Related to #51

Imagine User A has drawn something - say 2 random polygons. I have 2 questions:

1. When save() happens, is there a way to detect the two areas separately or will it be just one object?
2. Imagine a User B is presented with the same shapes and clicks on/inside one of them (say just a dot/point is being drawn). What would be the best way to detect if User B's shape "lies inside" or "overlaps" or "intersects" the User A's shapes?

My use case is something like a Recaptcha but with 1 background image. As User A you can designate certain areas on the image as "correct answers" and as User B you need to select an area and you will get a score for selecting the "correct" one. Does this fit the use case? Any other alternatives?

For some reason the pixelSize object for each region is missing now. It was working a couple of days ago. did you commit something or maybe I deleted necessary props? I can't find the reason

Is there a way to delete a point in a polygon? The problem is if for whatever reason you move two points too close to each other they become stuck, you can't be move them anymore because when you hover the mouse over them you get the plus icon and not the drag icon, when this happens you can't continue you have to delete the polygon and start all over.

I am trying to add functionality of the Save button using the annotator but following the documentation I am unsure of how to use the onExit property. Currently I am trying to just print to console the properties of the annotations I have made on an image and I assume that utilising the onExit property is the way to do this.

An example of using the onExit with its type MainLayoutState => any would be really appreciated.

Thank you.

The demo site has a "Demo Playground" link leading to:
https://waoai.github.io/react-image-annotate/demo

It returns a 404.

Hi,

I really like your library, thank you for open sourcing it.
Our use case requires us to tag more than just a string and a list of string. Would you accept a PR when we give a custom form and use it instead of the provided RegionLabel ?

Cheers

Hi guys!

Thanks for creating this awesome tool! Have been playing around with it a little bit and it seems very promising. 👍

I have one question though: now it seems that the image source needs to be an URLs to the image.. I was wondering that would it be possible to read the image directly from bytes for example? I have a MongoDB backend and I use Python as middleware that would allow me to pass the images to the frontend directly e.g. as Bytes (or some other in-memory format)? Do you think this would be a difficult thing to add/change? I would like to avoid saving the image to disk for this purpose..

I went through the codebase but as it is quite extensive so decided to ask first before spending more time trying to implement something silly without knowing too much about the insides of the project.. 🙂

@seveibar

When updating state of parent component, (changing the set of images and/or the current image). If the new selected image is not a part of the initial set of images, it wont work.

Fix: Make images more dynamic. If images are changed in props, update in the state of the tool.

The video support was build primarily for the UniversalDataTool so usage examples can be found there in the mean time.

Once the annotation is complete and saved on the DB or some storage. If we want to see what we annotated previously, How can we reload the annotation data into the image without missing a pixel value.

Documentation is not clear and also seen the Source. Nothing is helping out.

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Good luck with your project ✨

Your semantic-release bot 📦🚀

The demo page is offline.

I need to do something like:

<ReactImageAnnotate
    .......
    .......
    regionClsList={input => this.getClasses(input)}
/>

where given the input typed into the select 'value container' I can perform an api call filtered on the input (our potential items that need to be available to that dropdown is a very, very large list)

Is this possible at the moment?

Hi. Thanks for your great work. I'm fairly new to React and I want to use this library for one of my project. I run the below command and everything has been installed successfully.

npm install react-image-annotate

But here is the problem. I don't know how/where to use these lines to run the editor:

import ReactImageAnnotate from "react-image-annotate"
const App = () => (
  <ReactImageAnnotate
    selectedImage="https://example.com/image1.png"
    taskDescription="# Draw region around each face\n\nInclude chin and hair."
    images={[{ src: "https://example.com/image1.png", name: "Image 1" }]}
    regionClsList={["Man Face", "Woman Face"]}
  />
)

Any help would be appreciated. Thanks.

I tried to run the Usage code, and got an error:
Module not found: Can't resolve 'classnames' in 'C:......*PROJECT_NAME*\node_modules\material-survey\components\USRegionQuestion'

npm-debug.log

Probably rename to react-image-video-label or something. Not sure yet.

In my project i need to label images on screen but i don't know at the start whats in there.

Is there a way to use simple form or something like that to input tags during polygon creation not before ?

I've been hunting for a package like this for so long!

Just trying to get this up and running but I'm running into this issue:

Here's the component that's using this library:

import React from 'react'
import ReactImageAnnotate from 'react-image-annotate'

function ImageAnnotator() {
    return (
        <ReactImageAnnotate
            selectedImage="https://images.unsplash.com/photo-1561518776-e76a5e48f731?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
            // taskDescription="# Draw region around each face\n\nInclude chin and hair."
            // images={[
            //     { src: 'https://example.com/image1.png', name: 'Image 1' },
            // ]}
            // regionClsList={['Man Face', 'Woman Face']}
        />
    )
}

export default ImageAnnotator

I'm using Next.js if that matters

Thank you!

I have this error when I try to import react-image-annotate in my Create React App

./node_modules/material-survey/components/Survey/index.js
Module parse failed: Unexpected token (143:16)
You may need an appropriate loader to handle this file type.
|     }
|   }, _react2.default.createElement(_SurveyQuestion2.default, {
|     question: { ...q,
|       defaultAnswer: defaultAnswers[q.name]
|     },

Can somebody help me please

Hi, I Can't Change New Picture From Upload Button Help Me Plz

The pixels under a bounding box should be covered by the mask.

To do this, bounding boxes should be converted to polygons in the <ImageMask /> component before being sent to mmgc

Bug:

• While using bounding box, whenever I click on the canvas, another bounding box annotation is created.
• If I try to select one of the existing annotation, another bounding box is created

Expected behaviour:

• Do not create bounding box annotation on click, instead add threshold distance for mouse movement to create annotation.
• Do not create annotation when clicking on labels in canvas.

Create landing page to improve visibility and usage.

Hi!
Can you add circle and oval shape selectors also? Is it already on your roadmap?

Convert the pdf to an image and allow annotation. It may be possible to embed the PDF directly.

It freezes the UI thread

Arms and legs are often obscured in pose estimation settings, the user should be able to mark that on the points by double clicking them.

I am working on project where user upload a image zip file and it will get extracted in local. I want to render those extracted images.

Thanks.