I haven't dive in to trying the library out because I am trying to find out if this is possible.
I want to have the client side create a thumbnail as well as optimize the orignal file for web use. So upload maybe a 30x30 or 50x50 thumbnail and then a full size image like 600x600 or 800x800 With the same post request. Then I will be able to provide the serve the photos directly from what was uploaded.
If this is possible, what would the thumbnail be, post file[1] and full image, size file[0]
Is it possible to set it up to allow multiple post request for multiple images where each request has both a thumbnail and a full size image?
Is not a built in feature in dropzone but it is possible, but I think the easiest approach using dropzone would be to send the full image as a file, and the thumbnail as a text input field with the thumbnail base 64 encoded.
And yes you can configure dropzone to send an independent request for every image with one of this pairs per request.
Related
I'm trying out Cloudinary to get optimized images, and as a placeholder I want a blurred image. If the image is in my root media folder, this is no problem, see for instance this url:
https://res.cloudinary.com/dvghwblv8/image/upload/e_blur:2000,f_webp/sample.jpg
However, if I want to apply an effect to an image in one of my folders, I get a 404:
https://res.cloudinary.com/dvghwblv8/image/upload/q_auto,f_webp,e_blur:1000/samples/landscapes/landscape-panorama
Notice that as soon as I remove my effect, I do get my image:
https://res.cloudinary.com/dvghwblv8/image/upload/q_auto,f_webp/samples/landscapes/landscape-panorama
Why can I not apply effects to images that are in a folder?
Generally, when Cloudinary returns an error for an image/video URL that failed to load due to a problem with the image/video or URL, they will return an HTTP header containing more information about why the request failed.
They also return this header for requests where an image was returned but there was a warning, such as when the default image placeholder was sent instead of the requested image.
This information is sent in the x-cld-error header, and you can see the value by using your browser's web developer tools to examine the request and response for the image which didn't load correctly.
In your current case, the specific error is:
Maximum image size is 25 Megapixels. Requested 25.62 Megapixels
The error is returned as the dimensions of the output image (10,906px by 2,349px - (which are the original image dimensions as no resizing has been requested in your URL) - contains more Megapixels than your account's limit.
You can bypass this error by applying some resizing transformations to your image which will reduce the total number of megapixels of the output. You will not only want to do that to avoid this issue but also because delivering such a large image will result in a large output image in terms of bytes which will then count against your Bandwidth quota in Cloudinary for every request - for instance, the q_auto,f_webp is almost 3MB in size at the original image dimensions.
For example, you can ask Cloudinary to scale the image to 2,000px width (by adding c_scale and w_2000) as follows and then your blurred image will generate and be returned:
https://res.cloudinary.com/dvghwblv8/image/upload/c_scale,q_auto,f_webp,e_blur:1000,w_2000/samples/landscapes/landscape-panorama
The above resized version is also only 14.4KB in size and the same w_2000 version and without e_blur it's 115KB - a lot less than the 3MB image when just using q_auto,f_webp and the original (10,906x2,349) dimensions.
I'm wondering if anyone knows a good strategy for solving this problem:
I'm creating a social networking site using Laravel 4. Users can upload pictures to their own gallery. These pictures can be any shape and size but the gallery on their profile will only display a cropped and resized thumbnail of the image (200px x 200px), which you can click on to view the full image.
Im using the Laravel plugin Intervention right now, which saves the original image, then resizes and crops that image and saves it again ( so now I have 2 copies). I then display the cropped/resized image as the thumbnail that links to the full size original image. However, I find that making copies of every image will be a tedious waste of space on my server since there could be thousands of images uploaded to the site.
Is there a way to grab the original image, resize and crop it on the fly and display it only when the user loads the page without having to save the thumbnail to the server? or am I stuck with having to make a cropped copy for every image?
A great example that shows what I'm looking to achieve is the way Facebook crops pictures into squares in a users picture gallery or how they are cropped and resized on the newsfeed when a user uploads multiple images to a status.
Any advice is greatly appreciated!
Have you seen League/Glide yet? It's basically a wrapper for Intervention/Image and Intervention/ImageCache. Glide's Laravel setup video gets you set up in two minutes (pay attention to the second example).
Yes Intervention let's you manipulate and display on the fly too.
Here's a simple example (obviously you would actually do it with a controller etc)
Route::get('img/profile/picture.jpg', function(){
$img = Image::make('path/to/profile/picture.jpg');
// resize, crop, whatever
return $img->response();
});
And then you just set the right URI to this route as src of your image.
Intervention Docs
Keep in mind that this will use more server resources and make the image response take longer
For each photo in my datastore, I'm creating 3 thumbnails (small, medium, and large). I'm having a hard time figuring out what API functions to use on the original photos to get a balance between quality and file size for the thumbnails. The file size for the thumbs always seems to be too large.
GAE's Image API has many options for images (such as im_feeling_lucky(), converting from PNG to JPEG, and adjusting JPEG quality) and I'd like to know what functions to use and in which order to achieve the optimal setting for these thumbnails.
The easiest way to do this is simply to use get_serving_url to get a public URL for a scaled version of the image you can use as a thumbnail. This removes the need for you to create and separately store thumbnailed images.
I have created website where users can upload image with any size.
I have served images with get_serving_url function.
I have added to end of image modifiers to resize image to 200px size.
http://127.0.0.1:8080/_ah/img/dtrh0i6I_V5JGulg2_LKZw===s200
I have uploaded image 1000x800 - and all right - I have image with size 200x160
If I have uploaded image 100x50 - in result I have resized image with size 200x100. But this is not a good. I need to show original small image, if image size lower that 200px.
How to do this on Google App Engine + Python with get_serving_url?
What you need can't be done automatically using get_serving_url.
I think the easiest way to implement that would be saving the image along with a needs_resize property and calling get_serving_url without size parameter if that is not the case (which serves the original image).
I have a web page that has to load a bunch of small PNG images. Number of iamges and which images need to be embedded is dynamic and depends on parameters. Each image is approx 20 kb.
Is there an option to embed images in html to reduce number of http requests?
You can do that via : http://en.wikipedia.org/wiki/Data_URI_scheme
This works on all browsers except IE. To support IE, you would need to use a JavaScript URI that returns a base 64 PNG Data.
If your images are icons or the like, you can try the "sprite" method to reduce the number of HTTP request. Put all images in a single image, and use CSS to display only the needed part of the main image