Upload image thumbnail to server without uploading the entire image

Question

As far as I know, what I ask here is not possible, but I thought that I would ask anyway if I missed something.

Suppose you want users to upload JPG images, and these images are scaled to smaller icons, and the original images are always discarded and are no longer needed. Is there a way that usually works in most modern browsers that would allow the user to select one image on their hard drive, LOCALY turned into a thumbnail and uploaded the created thumbnail to the server?

In the case when the server just needs a small image, it would be wasteful both in user time and in the server resources to continue downloading the entire image, only to immediately discard it. It would be much better to simply scale it on the client.

I can imagine three options. Just HTML / Javascript using Flash or using Java. If it were possible with Flash, it would look like the best option. But, reading the flash.net.FileReference documentation, it seems that you can download the file from HD yes, but you cannot look at the download file. On the other hand, if you enable “local file access” in the Flash publishing options, it seems that you can no longer access the network, so this will not work.

With HTML / Javascript, you can load images and display them on <canvas> , but if you try to access the pixels of these images, you will get security breaches so that they do not work.

Java I do not dare to use it, because only 96.52% of my users installed it, and the dialogs for downloading the files that I saw implemented in Java (for example, on Facebook) did not work (unresponsive interface). Interestingly, though, if Java is the only thing that allows you to resize images from local HD?

Answer 1

I think that if there was a reliable and convenient way to do this, it would be done on sites such as Facebook. People are used to downloading the original image ... it’s always nice to improve the installed UX, but if you can only match it, you don’t really lose.

JavaScript is missing because JS cannot read anything directly from the client; it can only direct the browser to load a given local path or download bytes from the server.

A secure security sandbox also prevents this, as you indicated.

Java has a different set of problems - people rarely install applets these days unless they trust the site more than their own family members. It seems extremely difficult to build something reliable and usable, as evidenced by Facebook-esque, which has virtually unlimited resources to throw on the problem and still fail.

So, the resume is not, and don't worry too much about it.

Answer 2

"If Flash was possible, would be a better option."

As I understand it, this is possible with Flash Player 10.

Here is an example:

http://blog.kukiel.net/2009/02/file-manipulation-client-side-with.html

Currently, Flash Player 10 has a total market penetration of about 85-90%, so if you are hesitant to use Java because only 96.52% of your user installed it, I think you won’t want to require Flash Player 10 either.

Answer 3

If the jpeg image is progressive, you can stop downloading after receiving a certain amount of resolution. This will require a bit of your own jpeg loader processing and http processing code.

It is also a fairly large "IF", since most jpegs are not progressive by default.

Answer 4

Another way is to use Google Gears, for example: Gears Uploader .

Answer 5

I think that you can upload the image to the server and then show it in a browser, then the user will resize it using javascript, but not with real resizing, but only with its coordination, then you can use coordination to resize the image on the server and save the new image (thumb) and discard the original.