search

Secretmapper / react-image-annotation

An infinitely customizable image annotation library built on React
https://secretmapper.github.io/react-image-annotation/
MIT License
325 stars 135 forks source link

Edit the image in their original size #3

Closed rcostaf2 closed 6 years ago

rcostaf2 commented 6 years ago

Hello, and congratulates for the component is very helpful. I need use the image in its real size. Is possible expose the image Style. I saw that the class is configured at Annotation Class with 100% Width. I didn`t find a way to change it.

Thanks,

Secretmapper commented 6 years ago

Hello, and sorry for the late reply!

Unfortunately, I cannot expose the styles of the internal image component because changing it from 100% width will cause the overlay and intersection methods to be mismatched, for example:

screen shot 2018-05-17 at 12 48 31 pm

The recommended way to set the width/height style of the component is to wrap it in the desired container - so set the width/height of the parent that contains react-image-annotation.

To support the real dimensions of the image, you can programatically get the dimensions of the image, then set that as the dimensions of the container.

Let me know if you have any questions or if you think there is a better way to handle this!

wandonye commented 5 years ago

Could you provide some sample codes to set the container? Tried a lot of combinations of css, didn't work... If I wrap it with a div, how should I set the property of the div?

It would be great to expose a property allowing to switch to 100% heights. This will cover the two most common cases

wandonye commented 5 years ago

I was able to get it work by calculating the div's height and width using window size and image size. But it would be more efficient to allow a switch