如何在上传之前裁剪用户的图像/预览图像？

Question

I want to make user upload his picture.

After he selects the picture from his local computer, my ultimate aim is to save thumbnails of that image of some specific sizes(rectangular). To maintain aspect ratio I have to prompt user to crop that image and then I will create thumbnails for it.

For this I thought of way to First upload and then preview the image to the user
and then I would use external plugin(jcrop i guess) to crop that image
and then finally send it to server.

I am having trouble previewing the image. Some sources suggests like.

<input type="file" onclick="preview(this)" >

with JS :

function preview()
{
 alert(this.value);
 //code to append the image content in some div.
}

but I am only able to see final image name of the file in alert box(eg abc.jpg), not the entire path( eg /home/blah/blah .. /abc.jpg)

Is there any way I can make the user preview the image , so that i can crop it and then send to server? or do i have to save the original file first to the server and then only show user tool to crop the recently added image by him.

Answer 1

What your are trying to archive is not really possible: Grapping an image from an user's local machine using JavaScript. (What a security issue).

But In some browsers (only thinks it's chrome) you can use this method: http://html5demos.com/file-api-simple