upload and crop images using handler and javascript

========================================================================
Html code
========================================================================

  <input type="file" style="right: -8px; bottom: 40px; width: 11px; position: absolute; display: block; opacity: 0;"id="file_upload" name="file_upload"  onchange="return SaveImage(this);">
                            <a href="javascript:openFileSelector()"  class="edit transition" /><i></i>
========================================================================
Upload Image and crop using Handler and javascript
========================================================================


    <script type="text/javascript">

        function openFileSelector() {
            document.getElementById("file_upload").click();
        }

        function SaveImage(input) {
 
            show_progress();
            setTimeout(function () {                          
         
                var fileUpload1 = $(input).get(0);                      
                var files1 = fileUpload1.files;
                if (files1.length > 0) {

                    var D_Name1 = fileUpload1.files[0].name;
                    if ((D_Name1 != null) || (D_Name1 != "")) {
                        var FileExtension1 = checkFileExtension(D_Name1);
                        if (FileExtension1 == 'png' || FileExtension1 == 'jpg' || FileExtension1 == 'jpeg') {
                                                     
                            var size = parseFloat($("#file_upload")[0].files[0].size / 1024).toFixed(2);
                                                   
                            if (size > 1024 || size < 5) {

                                swal("Your image size " + size + " KB.\n" + "Please upload image  between 5 KB - 1 MB Size ");
                                hide_progress();
                                return false;
                            }
                            else {

                               var data1 = new FormData();
                                for (var i = 0; i < files1.length; i++) {
                                    data1.append(files1[i].name, files1[i]);
                                }
                                $.ajax({
                                    type: 'POST',
                                    processData: false,
                                    contentType: false,
                                    cache: true,
                                    data: data1,
                                    async: false,
                                    url: "/Content/Handler/UploadImage.ashx?files=" + D_Name1,
                                    success: function (response) {

                                        if (response == null) {
                                            return false;
                                            hide_progress();
                                        }
                                        else {
                                            debugger
                                            var a = "/Content/Upload/ResizeImage/" + response;
                                            $('#abc').attr('src', a);
                                            $('#imguserprofile').attr('src', a);
                                            SaveImageName(response);
                                         }
                                    }
                                });
                            }
                         }
                                                           
                        else {
                            $("#endTimeLabel").text('');
                            swal(FileExtension1 + ' File type is not supported');
                            hide_progress();
                            return false;
                        }
                    }
                }
            }, 2000);
        }

        function checkFileExtension(_input) {
            var FileExtension = _input.substring(_input.lastIndexOf('.') + 1).toLowerCase();
            return FileExtension;
        }

        function SaveImageName(ImageName) {
       
            var url = "/LegalDocument/saveImageName/";
         
            $.ajax({
                url: url,
                data: { ImageName: ImageName },
                cache: false,
                type: "POST",
                async: false,
                success: function (data) {
                   hide_progress();
                },
                error: function (reponse) {
                    swal("error : " + reponse);
                    hide_progress();
                    }
            });
        }

     </script>

========================================================================
Create a ashx extention file like thise: Downloadattatchment.ashx
========================================================================

  public class UploadImage : IHttpHandler
    {
        string SetDoc = "";
        string filename = string.Empty;
        string Tempfilename = string.Empty;
        private static Random RNG = new Random();
        public string Create16DigitString()
        {
            System.Text.StringBuilder builder = new System.Text.StringBuilder();
            while (builder.Length < 16)
            {
                builder.Append(RNG.Next(10).ToString());
            }
            return builder.ToString();
        }



        public void ProcessRequest(HttpContext context)
        {
            {
                context.Response.ContentType = "text/plain";
                context.Response.Expires = -1;
                try
                {

                    string TempName = "";
                    string filePath = "";
                    string files = context.Request.QueryString["files"];

                    HttpFileCollection postedFiles = context.Request.Files;
                    string[] a = postedFiles.AllKeys;
                    int TemppostedFiles = postedFiles.Count;
                    string[] SplitFiles = files.Split('*');

                    for (int i = 0; i < TemppostedFiles; i++)
                    {
                        string TempData = SplitFiles[i].ToString();
                        string temp = a[i].ToString();
                        for (int j = 0; j < TemppostedFiles; j++)
                        {
                            if (TempData == a[j].ToString())
                            {
                                TempName = DateTime.Now.ToString("yyyyddMMmmss");
                                filePath = context.Server.MapPath("~/Content/Upload/FullSizeUserImage/" + TempName + "_" + i + TempData);
                                postedFiles[i].SaveAs(filePath);
                                SetDoc = SetDoc + "#" + TempName + "_" + i + postedFiles[j].FileName;
                                System.Drawing.Image imgMediumSize = System.Drawing.Image.FromFile(filePath);
                                Image convertedImage = ResizeImage(imgMediumSize, 220, 196);
                                // imgMediumSize = resizeImageLeftSideProfilePic(imgMediumSize);
                                string pathMiddleSizeUserImage = context.Server.MapPath("~/Content/Upload/ResizeImage/" + TempName + "_" + i + TempData);
                                convertedImage.Save(pathMiddleSizeUserImage);
                                // imgMediumSize.Save(pathMiddleSizeUserImage);
                            }

                            //context.Response.Write(filename_img_165px_165px);
                        }
                    }
                    SetDoc = SetDoc.Remove(0, 1);
                    context.Response.Write(SetDoc);
                }
                catch (Exception)
                {
                    context.Response.Write(SetDoc);
                }
            }

        }
       
        static Image ResizeImage(Image image, int desWidth, int desHeight)
        {
            int x, y, w, h;

            if (image.Height > image.Width)
            {
               // w = (image.Width * desHeight) / image.Height;
                h = (image.Height * desWidth) / image.Width;
                w = desWidth;
                y = 0;
                x = 0;
            }
            else
            {
       
                h = desHeight;
             
                w = (image.Width * desHeight) / image.Height;
              // h = (image.Height * desWidth) / image.Width;
                y = 0;
                x = 0;
             
            }

            var bmp = new Bitmap(w, h);

            using (Graphics g = Graphics.FromImage(bmp))
            {
                g.CompositingQuality = CompositingQuality.HighQuality;
                g.InterpolationMode = InterpolationMode.HighQualityBicubic;
                g.DrawImage(image, x, y, w, h);
            }

            return bmp;
        }
       
       
       
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }