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.
Related
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.
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.
I'm developing a JS system with Node server and need to save images in MongoDB in a way that saves as much space as possible, and I'm currently converting the image to String base64 and saving as an attribute of a document in the collection.
However, with few photos (Full HD, 4K, 8K) the DB was already 350MB in size, it was something around 15 photos.
Besides this method there is another one in which the image is uploaded to a server folder and only the path and name of the image are saved.
I want to save server space because it will be deployed to the Google Cloud Platform, and I do not want to have extra costs just because of photos.
My question is: What methods other than those mentioned above exist to save an image in MongoDB as efficiently as possible ??
Note: I can not post the code because I have it only on the company computer
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.
I am working on a project where I need to upload an image to google cloud services..
The question is what are the steps that you take to upload an image to google cloud services in the web browser, I would prefer to upload it directly to google cloud services on the client side rather than uploading to my webserver and then uploading to google. Seems like that would take too many steps.
A little background is that this will take place in a mobile web browser..
Steps:
- A user will take a photo after clicking a button that launches their camera
- They will click save and the image will be uploaded directly to google cloud services, which will return a given id for that image to be stored in a table
I have read google cloud services documentation, yet primarily the information I found was related directly to android/ios for storage. I understand that you cannot upload an image using ajax, yet you can do it within an iframe. Is it possible to get the image binary data and convert it to base64 and then upload that string to google cloud services in order to store the data?
TLDR:
- What are the steps in order to upload an image to google cloud services?
In google App engine it is possible to upload image by converting to base64 but you will need to convert it again into binary blob type from base64 to store it.
It is possible to upload a image directly to google app engine just by using a single html form having <input file="" name="fileupload"/> on client side. Endpoint will be the servlet address on google appengine which handle this form request.
On the server side toy just need to get parameters of submitted form. Assign parameter named fileupload into blob type and then save using entity or in resource.
update: Submitting a from is possible through ajax without reloading but simple jquery/javascript don't support form submission which has input tag of file type therefore, a jquery plugin used to do this :
Ex:
$(function() {
$('#submitForm').ajaxForm(function(result) {
// Do some DOM operation like hiding loader
}).submit();
});