I'm looking for a way to upload multiple images with description. Users will be uploading 1-10 images of quite a large size from cameras so it's better if the images get resized before upload.
Requirements:
browser compatible (including mobile browsers and IE), can rely on JavaScript (jQuery)
multiple files either as selection of multiple files in native file manager or at least having to click on some button to bring an input for another file
add a description to each file
resize files before upload (doesn't need to be browser compatible)
uploads on submit
keeps EXIF info or at least extracts GPS coordinates (could do it with some libraries I found)
Bonuses:
can auto-rotate image before upload (using EXIF info)
shows thumbnail of selected image
drag & drop feature
progress bar
I use PHP on backend.
I guess HTML5 canvas might be suitable here. Or some jQuery plugin like blueimp's Jquery-File-Upload. But I don't have experience with more than simple <input type="file">s so I'm asking for your suggestions.
Thanks!
Take a look at Uploadcare. Its widget meets almost all of your requirements out of the box, and you can customize it's behavior to cover remaining.
disclosure: I am one of Uploadcare developers and am posting this not to shamelessly promote the service but because it was built to solve cases like this one.
Related
I want to make a html(css/js) website where I can drag photos from my computer with drag&drop and then (based on a chosen layout) to make a collage (drag&drop also) with 2 or more pictures. My question is: How can I do that?
I know how to use the draggable option or how to drag photos from one point to another in my website. Unfortunately i do not have any idea of how can i upload pictures from my computer that i want to use in my future collage or how to create those layouts (in which i put the photos).
If you know a website with these kinds of tutorials it would be good also (I coundn't find anything helpful).
Thank you so much!
you can do it with a JS library!
recently I used http://www.dropzonejs.com/ for drag and drop files uploading.
it's working fine and has some good configurations to set.
but for saving files to the server you might need some PHP as well.
I have an app on the iphone which will display on the screen an html file containing text and an image. I manipulate this html file with javascript and when I'm done I would like the user to be able to take a screen shot but would like it to be done automatically, without pressing the home and power buttons. Is the some javascript or jQuery that, once the final screen is displayed on the phone, automatically takes a screen shot and places it into the photo library on the phone? Thanks.
Short answer: No. Longer answer: Kinda, but not really.
As far as I know, you cannot make iOS take a screenshot nor even download an image through Javascript or similar. However, I guess you could try to draw the DOM in a canvas and then use canvas.toDataURL() (link) to convert it into an image. You could then instruct the user to hold down their finger on the image to bring up the save dialogue and save it to their device.
As I said, not really a pretty solution, but perhaps something you could experiment with if you really need this feature.
Edit: I did a fast Google search and found this javascript library that should make it a bit easier to do what I described above.
Is there any pure JavaScript way to reduce the quality to a specified size? For example if someone tries to upload a 12MP image is there any way to reduce this to 5MP for example? At the moment we are using Aurigma, but would like to get away from the reliance on a plugin that the user may or may not have.
SO recommended this post as a possible question/answer, but this seems to deal with cropping the image. I'm needing to reduce the size of the image client side. Is this something that is possible? Is there a plugin for jQuery that does this?
You try using the Plupload library. I have been using it for multiple file uploads, but never its PNG, JPEG resize capabilities.
There is a related question at Image resize before upload
I am attempting to build out a visual jQuery based browser for thumbnailed assets grouped by the upload date of the asset. The backend part is fine, but I'm having a really hard time finding a workable visual solution that can handle (potentially) hundreds to thousands of assets smoothly. The display of the content is not an issue as it is being handled by a lightbox, I just need to figure out a way to actually display the thumbnails.
I've been trying to interface with this plugin but have been running into a lot of problems once it gets over 100 records, everything just becomes horribly unresponsive. Ideally I want to be able to build ajax into this for loading media as needed rather than a bulk get on page load. Does anyone know of a good plugin that can be leveraged to achieve this effect or at least provide a good user interface for browsing large amounts of content?
To clarify: I have properly generated thumbnails being made when an asset is uploaded, these are what are displayed on the page, and the full size image is only loaded in the lightbox when the thumbnail is clicked. I'm just trying to determine a good way to browse a large quantity of thumbnails sorted by upload date.
It sounds like your scaling the full size images down which will ruin performance. Do the images have a small version counterpart you can use for the thumbnails?
Turns out there really wasn't a good way to implement a prebuild plugin for this situation, the best way to do it for me was to implement a jQuery UI slider and on the stop event of that I then do an ajax get to load the appropriate data into a div with vertical scrolling.
Maybe not the most elegant or prettiest solution, but it works for the situation and looks nice enough.
I would like a user to be able to edit an image that I serve, using Javascript, and then upload that image back into App Engine.
Original image is stored as Blob in DataStore.
Image is served (currently) just using
Currently user can only view the image, but i want user to be able to edit the images (adding text and lines at most, no complex transformation needed).
User can save the image back into the web application.
What is the quickest way to do this?
Will it be easy to integrate with 3rd party javascript image libraries (which has the editing tools already)?
Your starting point (and minimum requirement) for line art (read: not pixels but as you say: text and lines) will be the HTML5 Canvas Object:
http://www.w3schools.com/html5/html5_canvas.asp
Depending on your use case you may want to 'underlay' the pixel image to be decorated.
For saving refer to
http://www.tutorialspoint.com/html5/canvas_states.htm and
How to save HTML5 canvas?
If the end results shall be pixels, Canvas2Image might by for you.
Sorry to just throw general links at you, but since you asked in a general way. Hope this helps.