File upload reference on client side for client side processing like crop image or anything

I have had a requirement were i needed to include the crop functionality in already developed file upload control, requirement was user should be able to crop the images he selects and later on when he finalize the selection, and that file should get saved on server so next it is available to user
Here our tradition approach is always like, we upload the file on server on some temporary location, so that it is available for cropping to user, and he can apply cropping on client side and send that to server with its crop selection and on server side we can process that image and crop on server side with already uploaded image and save so only cropped version will be saved and use that image
There is another approach which can save us from doing the upload first, crop and later on again save that image, the process is like following, Find the following code



Consider following is my upload control

Now,Consider following javascript registered which will take the file reference on client side and return the byte array of image and directly show in preview on the fly and very fast, as it is yet not uploaded on server, so process is very fast

function getImageFromClientSide(file) {

    var reader = new FileReader();
    var image  = new Image();
  
    reader.readAsDataURL(file);  
    reader.onload = function(_file) {
    image.src    = _file.target.result;              
    image.onload = function() {
           var w = this.width,
           h = this.height,
           t = file.type,                           
           n = file.name,
           s = ~~(file.size/1024) +'KB';
           $('#uploadedImagePreview').attr('src',this.src);
        };
    };
    
}
$("#imgSelector").change(function (e) {
    getImageFromClientSide(this);

});

As you can above, what it is using is FileReader method of DOM and reading a file from client's computer, and it will convert image into byte array of base 64, now you can treat this as a string and you can send this image to server side using ajax or anything as a string, and on server side (i am using asp.net c#, and you can use following

byte[] imageBytes = Convert.FromBase64String(imageByteArray); // Here imageByteArray is my string variable which contains the byte array string sent from client side 
   TypeConverter tc = TypeDescriptor.GetConverter(typeof(Image));
   Image OriginalImage = (Image)tc.ConvertFrom(imageBytes))

As this whole process is working on client side, this is very fast in performance, I got the reference of my search and r&d from http://jsbin.com/oTAtIpA/490/edit url and i implimented it from the same, i hope this will help some of you coders
Thanks you !!!