How to annotate an image in react native? - reactjs

I am new to react-native. I need to create an volume estimation app from food images. For volume estimation, I need a segmentation json file whose format is in the form of labelme annotations.
But when I use labelme I have to manually draw polygons around the image.
Can I do something similiar in react-native like when I upload an image I can draw a polygon around the image and retrieve its coordinates. Then I could convert the coordinates into labelme annotation json file.
Any suggestions?
Thank You

Related

How to convert an image to a video stream functionally in react?

I would like to convert a image to a MediaStream in react, functionally as I have a requirement to merge the image MediaStream with my webcam MediaStream and download it.
However currently I am unable to do that and I have tried various methods including drawing to the canvas however I am not sure why that doesn’t work. Any suggestions with an example would be greatly helpful.

Exporting geojson mapbox shapes to mango db?

I am working on a project where a user can outline an area in a map provided by mapbox. I would like to make it so that once the person saves their progress they can log out and log back in to find the area they outlined still there.
I would like to know how I can export a geojson file to my server. If it matters, I am using mango db.
Also, I am using React JS.
You can serialize the geojson feature to string and then store it in a string type column of your DB
JSON.stringify(feature, null, 2);

Add Image over another image and save it

I am working on a react project in which we generate new images by fitting uploaded image in a tv screen, or laptop screen or mobile screen. So what I want is a way in which I can place the uploaded image into this below image
In the black tv screen I want the uploaded image to fit and below there will be download option to download the uploaded image.
I searched for that and came across cloudinary react library. So I wrote this code to somehow fit an image inside this image but I can't seem to find any way to download that image.
If you have any idea of doing this please share with me.
Thank You in advance
You can overlay images on other images without having to use a particular Cloudinary SDK, as outlined here: https://cloudinary.com/documentation/image_transformations#adding_image_overlays
You can then place them more specifically using x and y coordinates in the URL as outlined here: https://cloudinary.com/documentation/image_transformations#placing_overlays
Once you have generated an image with the overlay positioned correctly (and with any other transformations you may wish to process), you can download the generated image as normal.

Does the Google Street View API support retrieving a full 360 equi-rectangualr image?

The docs are not clear on this as they mention fov and viewport suggesting a portion of the entire spherical image.
Does the Google Street View API support retrieving the entire 360 degree equi-rectangular (lat/lon) image?
No, but you could download separate panorama tiles and pack them together of use a third party tool (ex: https://istreetview.com/) and get the entire 360 degree image.
Another option would be to code the above functionality by yourself by using Google StreetView Image API (https://developers.google.com/maps/documentation/streetview/intro). To be honest, I did not try this myself, but through the API you should be able to retrieve all parts of the image and then stitch it back into equirectangular panorama.
This might give you more info:
How to get the original panorama image by panoid in google street view?
EDIT: While searching a way to overcome the fact that Google StreetView app doesn;t work as marketed, I found another third party service able to retrieve photos https://gothru.co/
It is possible by making use of the FOV and heading options within the API.
Take particular note of the heading param.
https://maps.googleapis.com/maps/api/streetview?size=640x640&location=51.52551,-0.08853&fov=120&heading=0&key=YOUR_KEY
https://maps.googleapis.com/maps/api/streetview?size=640x640&location=51.52551,-0.08853&fov=120&heading=120&source=outdoor&key=YOUR_KEY
https://maps.googleapis.com/maps/api/streetview?size=640x640&location=51.52551,-0.08853&fov=120&heading=240&key=YOUR_KEY
By making these three separate API calls you will receive the 360 image sliced into three parts.
You can then use something like node blend to combine them and voila you have a 360 panoramic image!

How to get coordinates of the cropped image using ngImgCrop

I am using ngImgCrop directive to crop images in my application. As a first step, the actual image gets uploaded to the server as soon as the user selects it. The second step is to crop it. I need to know the coordinates of the cropped image to send it to server so that it crops the image based on the coordinates.
Is it possible to get the coordinates of the cropped image? Please let me know
You can do the cropping in the browser before it gets uploaded, I have done it using Danial Farid's angular file upload
https://github.com/danialfarid/ng-file-upload
and ngCroppie,
https://allenroyston.herokuapp.com/access/acr-croppie/
It's a wrapper for Foliotek's Croppie
http://foliotek.github.io/Croppie/

Resources