This is my first time to post a question here. I was building a meteor app with image uploading functions. I found a cloudinary package for meteor https://github.com/Lepozepo/cloudinary and it works pretty well. The only and the biggest problem I have is the resizing of image. By default this package will upload the original image taken from phone, which is often 3 or 4 MB and whose size is around 2000x4000, but I only want image to a few KBs. And because of this problem, it takes so much storage and bandwidth for the app. What should I do to fix this problem ? Thank you very much.
I am not sure if anybody needs this but i was struggling with this for the past 2 days and could not find a solution. Finally i went to cloudinary dashboard and it was the simplest thing ever. Login to your cloudinary. Go to settings -> upload -> Upload presets: edit(on your project) -> upload manipulations -> Incoming Transformation: edit -> change the imcoming image as you like :D.
I uploaded an image 2mb in size and it came down to 30kb after applying incoming transformation.
Hope this helps someone :)
If you're performing client-side uploads (via Cloudinary's jQuery integration library), you can perform a client-side resize before the upload:
https://github.com/cloudinary/cloudinary_js#client-side-image-resizing-before-upload
If you're performing server-side uploads, you can apply an incoming transformation to transform (resize) the image before storing it in your Cloudinary account.
Incoming transformations can be set in upload presets too:
http://cloudinary.com/blog/centralized_control_for_image_upload_image_size_format_thumbnail_generation_tagging_and_more
Related
I am making android app that must show a lot of images from my REST API. I want to download images, and the next time check for images' name. If the image exists show them from the phone otherwise download from server.
Now I'm using Retrofit for my network requests and Glide for show images. But I have not good idea for solve this issue.
If needed I can change the network library or image loading library.
Thanks in advance
NOTE: This question might be too broad for the liking of S.O.
What you want to do is make what is known as a cache. The idea is that you have a unique identifier (often refered to as a key) for each object in the cache, such as an md5 sum of the image data, or original name + date of creation.
When you want to display an image, you first check if the image exists in the cache. If it exists simply return with the image from cache. if it does not exist, start the download and upon completion you insert the image into the cache.
Here is an example implementation that does what you want. I cannot vouch for it's quality because I never tried it.
I'm trying to build a E-commerce site with a admin page where the administrator can upload images of certain products.
I'd like Meteor to upload those images to a folder and then display those images in the product page of that product.
I know that normally the image files that the client will be using should be inside the 'public' folder, but I'd like to know more about what other options I might have.
Also, if I upload a new file to the 'public' folder or if I delete a file in the 'public' folder, the website refreshes itself...and this is good and bad at the same time depending on what effect you are after....
Here are my questions:
What if I create a 'uploads' folder in the server and upload the images to that folder. Would it be possible to display the images inside the 'uploads' folder in the client browser??? How??
Is there a way to use the browser to access the contents of the 'public' folder???
Is there a way to stop the 'reactivity' of the site if changes happen in the 'uploads' folder created?
Is uploading the images to the 'public' folder the best solution available to this problem?
Thank you very much for the help
When dealing with what will likely be a large number of images I like to offload not only the storage but also the processing to a third party.
My go-to app in this situation would be Cloudinary. Here's why:
Storage - I can store the original images outside of my application. A huge benefit to keep images in sync from dev to prod.
CDN - I get the extra benefits of images being quickly loaded from the Cloudinary CDN.
Off-load Processing - All of the processing of images is handled by Cloudinary which doesn't slow down my app as a whole.
Image Manipulation - I can make calls to the original image, calls to just get a thumbnail, and calls to change manipulate, ie :effect => grayscale. So if a 1000x1000px image was uploaded, I can request a 50x50px from Cloudinary that will return the image cropped to that exact size rather than using CSS to shrink a huge image.
Flexibility - I can change the size of images and return that exact size to the app without having to re-upload images. For example, if my product page pulled in thumbs at 40px, I could easily make a call to grab the same image at 50px.
Hope this helps.
http://cloudinary.com/
You can do all of this using the meteor package collectionFS. The package is well documented and you have a variety of options that you can uses for storing the uploaded files. CollectionFS also gives the ability for image manipulation on the upload, such as creating a resized thumbnail.
I realized this question is a bit old.
I had the same problem, one of the solution that works for me is using meteor-upload https://github.com/tomitrescak/meteor-tomi-upload-jquery
Definitely don't store stuff in the public directory - it will slow down starting up the app, and hot code refreshes on image upload could easily cause it to crash once there are a decent number of images in there.
Any of the above solutions with storing images elsewhere would work. One other option is using the peerlibrary:aws-sdk package to upload stuff to S3, which is what I use for several apps and have found to be very clean.
Storing the image as a base64 string in MongoDB is also a method. Useful for posting to APIs and save the worry of having to handle other 3rd Parties.
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 !!!!
I am setting up a site in Drupal 7 for a photographer which includes uploading a large number of photos to the server. My problem is that image upload is extremely unstable. Sometimes it works, sometimes it does not. It seems I am hitting some kind of memory or bandwidth limit, but I don't get any errors.
I created a custom content type for photo albums, with each category (e.g. "portrait", "wedding" etc.) as a node with a number of attached images that I display using views slideshow. Everything works on the front end.
Image upload is handled by an image field and the Media file selector widget. The problem is that sometimes during upload the page will just refresh and the image does not show up in the list of attached images.
I also tried using the Plupload widget that allows uploading several images at once. With this I get a slightly different behavior. The images will "break" after two or three images meaning that they show up as corrupted images with part of the image missing. Sometimes refreshing the page or clearing all Drupal caches will allow me to upload maybe four images at once.
It looks like this
What is strange is that the same exact image file will sometimes upload, and sometimes not.
I am not uploading huge images. They are all manually resized to less than 1600x1600px before uploading, with file sizes between 200 and 600 KB.
Drupal 7.14
Plupload library 1.5.4
Plupload integration module 7.x-1.0
Plupload widget 7.x-1.0-alpha1
PHP settings:
PHP version 5.3.10
Max upload size: 5M
Memory limit: 1024M (increased from 128M using ini_set() in settings.php)
Any help will be greatly appreciated! I have been googling for days trying to solve this.
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).