Removing background from image in React Native - javascript

So I currently have an app that allows the user to take a photo. I would like it so that once they've taken the photo of themself, the app will remove the background of the image (like remove.bg) and present it as a transparent PNG. I would use remove.bg's API but you only get 50 free credits a month and I would likely be processing more than that. I've looked into OpenCV and Tensorflow but I can't really seem to get any success with it. Any help would be appreciated.

You'd probably have to setup a backend for that, if you want to remove the background. Once the user takes a photo the image gets sent to your backend where it gets processed by OpenCV and sent back backgroundless. Django or Nodejs make good backend options.

Related

How to extract first frame from video file and create a separate image file?

I am using next js with supabase for my backend and I was wondering if there is an efficient way to achieve this on the client side, usually I would simply call a method from my client to upload selected media. At the moment supabase don't have anything built in to automatically create thumbnails when you upload a video.
I know that there are some node js libraries that could create thumbnail images from video, however I have few questions:
Next js api routes are limited to 4MB, so that wouldn't work anyways?
I would have to create a server just to handle thumbnail creation, so I could be sending 500mb worth of data just for the sake of capturing a thumbnail and then doing another call to upload that video to my storage.
Are there any alternatives to handle this issue with next js app?

What is best way to send images to Rest API?

I am trying to build a React app which sends an image to an Rest API and returns a processed image.
What is the best way to send images through Rest API ?
My current assumption is using "base64" encoding to send images as strings,but the size of my images will be around 5-10MB and I dont think base64 will cut it.
Please help me out here,I am build the front-end using ReactJS & NodeJs,the Rest API will be build using python Flask or FastAPI.
You shouldn't be sending the images this way at all. The rough approach might be to upload images to some storage (S3 or whatever), then use API just to communicate the reference to that image (id, URI). Basically, you just need to send the info about who uploaded the image (user id) and where it is stored (filesystem path of the image, S3 reference, etc.), then you'll be able to relate the two entities and handle the images processing separately.
If file size is greater then you can use FineUploader, using fineuploader file can upload in chunks.

Upload, store and load images

I have a fundamental question. I'm working on several projects developing backend and frontend with node, react and react-native. Sometimes I have to upload, store and reload images. I found a way to upload images to a cloud service and load them later in my frontend. But now I have the situation that I don't want to store the images in a cloud service instead I want to store the images in my own database. Since I use a framework in my backend that don't support types like BLOB the only way to store a image is to convert the image to a string like base64. Now I'm facing some problems:
Images above 2MB seems to be too large
If I send a POST request to store a image I get an error that the payload or something like this is too large
If I try to console log my base64 string the browser often hang up
If I try to copy paste the base64 string for example in a JavaScript file as a comment it don't shows me the full string instead I found at some point a ...
So it seems to me that this approach is not fitted for real world applications. So what I want to ask is, how big players handle this Image workflow? For example if I open instagram or a shopping app, this apps maybe loads hundreds of images in seconds. Or if I upload a image to instagram, how is this done in the background? Do they convert the images to string?
I already failed by sending a simple POST Request with a image of 5Mb size converted to a base64 string.
Thank you in advance for some helpful tips.

Is it possible to simulate a facebook tracking pixel request server side?

I'm working with Rails 3.2 and I'm trying to set up a tracking pixel at the end of a website's signup process.
The issue I have though is that the signup process is done via js/ajax and once they complete it, I send a user to one of a few different pages. ie some get A, some get B, some get C.
I don't want to put the same pixel on all 3 because I may change the pages or swap them out in the future.
So is it possible to simulate the same request that the facebook tracking pixel makes but server side?
When you create a conversion pixel for Facebook you get a code snippet you can add to your html. This code snippet it's just a javascript code that fires the pixel. If you debug the page you'll see that the only thing it does is a GET call to a URL. You can copy that URL and make a cURL call (GET) from your server any time you want.
This is an example of the URL:
https://www.facebook.com/tr/?id=null&ev=CONVERSION_PIXEL_ID&dl=http%3A%2F%2Fmyurl.com%2F&rl=&if=false&cd[value]=0.01&cd[currency]=USD
However, I do not recommend to do this. It's better if you leave Facebook building the URL and firing it through the javascript snippet. This is not reliable and your data might be alterated. If you do not use the code snippet you won't be able to complain to Facebook if your data doesn't match as you're not following the standard process.
What I really recommend is create a different pixel id for each page.
I hope it makes sense.
Javier.

Phonegap app - How to get images from Json Web Service Response?

I need to get images from server side in a Phonegap App. This app uses a Json Web Service to get data from the a .NET application (Server). I need to get images via web services and store in some location of device (temporally). Im asking the first thing. Im thinking what the way to do that is taking via ws the urls of the images, but I need then a way to use the url of image to"download" or get it via url and save to some object or something in Javascript (I guess) for in the case that the device lose the internet connection, the app remains the images getted.
What do you think about this approach and do you know how I can do this way?
Thanks!
As per my understanding for your question you want to download the image... For this you can make use of Cordova file plugin.
Secondly you can keep the image inside your project as well.

Categories

Resources