I am creating a photo web application on mobile that allows users to upload a photo at a time. Like how instagram does it for manually uploading a photo from the user's gallery, I want to specify a box which would then allow the user to scale and align within the box. What appears in the box will then be cropped and uploaded to my backend server (parse). I am developing this application on emberjs (pretty new to this). May I know what is the best way of doing so?
Related
I want to only allow images that are taken directly with the phone’s camera on my website. Are there any APIs or tricks that could help me tell if an image is authentic and taken with an iPhone or Android camera a few moments ago and not taken from Google Images.
Hi drstuggels they are a few ways to go about this.
WebRTC
To prevent upload from any file, take picture directly on your web interface, via the user webcam.
You would need to
Ask permission to the user to use the webcam.
Open the video stream
Capture on click the frame
Save the frame
This would prevent lambda users from uploading picture "not live".
If this is a solution you are considering, look for WebRTC. Although there are many blog post showcasing demo for this exact use case.
Such as:
https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos
EXIF validation
As mentioned by iѕєρєня, you could try to access the EXIF metadata of the uploaded picture and run a validation mechanism, for let say freshness but looking for date and time field (if you are looking for a newly taken photo) or the camera model field to make sure it was taken by a camera (phone, DSLR, etc..).
DISCLAIMER:
Nothing will prevent a malicious user from tampering with the js code or file to upload fake picture.
I am currently using Google Places API on react native to get an array of photo URLs from a specific site. However, I would like my user to pick the ones that they want us to save in our servers (multiple images), and also set as primary picture for their profile.
I've been looking through many image picker libraries on React Native but all of them focus on getting data from the device, which is perfect, but not what I am looking for.
I would like to know if anyone has found any library like react-native-image-crop-picker that lets the user select multiple images from an array of image urls that I pass.
I have a mobile app where users can upload JPGs but I want to limit the size of the image before sending it to my GAE blobstore. I don't want to have to force a user to resize the image they want to upload but rather just do it on the fly. Anyone got a way to do this without distorting the image?
There is no straight forward way to do it and no third party library in gwt yet for this.
Option 1
The best you can try is for GWT wrappers over html5 apis . You can track this on another stackoverflow question Image resizing client-side with javascript before upload to the server
Option 2
Upload and process on server side before pushing to GAE blobstore.
If I am correct blobstores maximum file size is around 2Gb. And you can send around 1Mb of data in one request of GAE blobstore service.
There is an app called AppImage that divides the file into smaller pieces. For more info on that click the below link
Large Image Resizing for Google App Engine
This is just a thought : why do you want to upload it through GAE as you can directly upload it to blobstore unless it greater the 2Gb !!!!
Im building a mobile app for android & ios using appcelerator. I've build a rest server using cakephp
which returns json.
I would like to know how i could make it possible that users upload a image to a server and the server
resizes this picture to 2 different standard sizes and stores them on the server. This image should be
accessible trough a json get request along side with other corresponding information. My questions are
How can i autimatically resize pictures that are uplouded by users in to two standard sizes and
how can i store these images(in folders or DB) so they are accessible through json alongside their other corresponding infomation?
for the resizing, just google "php resize image". Store the images in some folder in webroot/img folder and store the file name in the db. You might need to rename the file in case there's another file with the same name. When requested, just give the users the url to your image.
I've got an app on Google App Engine that will accept image uploads from users. The problem that I envision is that users will upload these images directly from their cameras, and file sizes are often greater than 1MB, which is the limit for the image API (which would be used to resize the images).
What's the best way to accept the upload of say a 1.5MB image file, and resize it to under 1MB?
While this is not clear in the App Engine documentation, this is possible by using a combination of the Blobstore and the Image Manipulation Service.
You must:
Upload the Image into the Blobstore
Retrieve the Image from the Blobstore
Perform the Image Manipulation with an Image resulting in less than 1mb in size
I've written up a post about this -> http://socialappdev.com/uploading-and-re-sizing-large-images-on-app-engine-11-2010.
Here are two (similar) ways to solve this:
If you want to keep everything controlled yourself, you can put a resize script on a server of yours, which takes the URL to the raw uploaded image (which can be up to 10MB due to HTTP response size limit, but you would have to store it as 1MB chunks in the datastore), downloads it from your application, resizes it, and then POSTs it back to your application. All this interaction would need some kind of authorization of course, so that it can't be abused. Alternatively, POST the image directly to your external server, but then you have to either send the other form data back to your application, or use a separate form for the image upload.
Use an external imaging service. I would recommend Picnik. See their API documentation. As you can see, it lets you make a form that posts the image directly to their servers, then the user can edit the image (and resize), then the image is posted back to your server. With this solution you have to upload the image in a separate form, since Picnik receives all your POST data.
I recommend point 2, because it doesn't require you to go around Google App Engine limitations and since your users are uploading images straight from the camera, they will probably want to do something with them anyways (such as crop.)
That's a conundrum. The "obvious" answer, using google.appengine.api.images.resize, won't work because it's too big. :) So you will have to use third-party software, either on the server (which will be tricky because of App Engine's limitations) or the cilent (e.g. a Java uploader).