上传照片

Question

My question is regarding uploading photographs to a webserver.

I recently observed while uploading a photograph on facebook that it can upload (and by default it does) upload smaller photographs than what we request.

Now, I can think of uploading a full size photograph and compress when it reaches the server.

But how could facebook resize the picture while uploading.
Is there any request header (I think there is not) that asks browser to upload specific size image and manipulate the exif/jpeg data in the file.

If not, some plugin/Flash/Javascript has to read the file/images from our system. Does web standard really allow file reading from the user system?

Please advise.

Regards,
Mayank

Answer 1

Website / webserver cannot do anything with the image until it is uploaded and saved into target directory. It must receive fullsize image and then resite it to desired size [generate thumbnails, etc.]. There is no request header that you described.

Web standards don't allow reading files from user hard disk. The thing that they allow is to select file from hard disk and then send to server - initiative is on the client's side, not server's.

Is there anything more you would like to know?

update

See this: Flash upload image resize client side

As I said - without external mechanisms we can't do anything. But of course, if we take into account Flash, Google Gears and so on, everything is possible.

Answer 2

It is now possible with HTML5

Not all browsers accommodate it at the present however there are some features in HTML5 that will resize an image before it sends it over the wire.

Look at hacks.mozilla.org... for more details

Excerpt from the above link:

Resize the Image

People are used to uploading images straight from their camera. This gives high resolution and extremely heavy (several megabyte) files. Depending on the usage, you may want to resize such images. A super easy trick is to simply have a small canvas (800×600 for example) and to draw the image tag into this canvas. Of course, you'll have to update the canvas dimensions to keep the ratio of the image.

var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var width = img.width;
var height = img.height;

if (width > height) {
  if (width > MAX_WIDTH) {
    height *= MAX_WIDTH / width;
    width = MAX_WIDTH;
  }
} else {
  if (height > MAX_HEIGHT) {
    width *= MAX_HEIGHT / height;
    height = MAX_HEIGHT;
  }
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height)