Save cropped image in jpeg format in ASP.Net

How do i save the cropped image only as jpeg format?

        protected void Upload(object sender, EventArgs e)
        {
            if (!string.IsNullOrEmpty(Request.Form["imgCropped"]))
            {
                string base64 = Request.Form["imgCropped"].Split(',')[1];
                string imageName = Request.Form["imgName"];
                imageName = System.Guid.NewGuid().ToString("N") + Path.GetExtension(imageName);
                byte[] bytes = Convert.FromBase64String(base64);
                string filePath = "~/PROFILEPHOTOS/" + imageName;
                using (FileStream stream = new FileStream(Server.MapPath(filePath), FileMode.Create))
                {
                    stream.Write(bytes, 0, bytes.Length);
                    stream.Flush();
                }

                SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DB"].ConnectionString);

                SqlCommand cmd = new SqlCommand("UPDATE User3 SET ImageName=@ImageName WHERE Email=@Email", con);
                cmd.CommandType = System.Data.CommandType.Text;
                cmd.Parameters.AddWithValue("@Email", HttpContext.Current.User.Identity.Name);
                cmd.Parameters.AddWithValue("@ImageName", imageName);
                cmd.Parameters.AddWithValue("@Path", filePath);
                con.Open();
                cmd.ExecuteNonQuery();
                con.Close();
            }
        }

        <script src="cropbox-master/jquery/cropbox-min.js"></script>
        <script type="text/javascript">
            $(window).load(function () {
                var options = { thumbBox: '.thumbBox', spinner: '.spinner', imgSrc: 'avatar.png' }
                var cropper = $('.imageBox').cropbox(options);
                $('#file').on('change', function () {
                    $('#imgName').val($(this).val().split('\\')[$(this).val().split('\\').length - 1]);
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        options.imgSrc = e.target.result;
                        cropper = $('.imageBox').cropbox(options);
                    }
                    reader.readAsDataURL(this.files[0]);
                    this.files = [];
                })
                $('#btnCrop').on('click', function () {
                    var img = cropper.getDataURL();
                    $('#imgCropped').val(img);
                    $('.cropped').append('<img src="' + img + '">');
                })
                $('#btnZoomIn').on('click', function () { cropper.zoomIn(); })
                $('#btnZoomOut').on('click', function () { cropper.zoomOut(); })
            });
    </script>
    </div>
    <div class="container">
        <div class="col-lg-12 ">
            <div class="col-lg-5">
                <input type="hidden" name="imgCropped" id="imgCropped" />
        <input type="hidden" name="imgName" id="imgName" />
       
                 <div class="imageBox">
            <div class="thumbBox">
            </div>
        </div>
            </div>          
       
       <div class="col-lg-5">
           <div class="cropped" >
        </div>
          
           
            <div class=" well" style="margin-top:8px">
            <div class=" text-right">
                 <asp:FileUpload ID="file" runat="server"  CssClass="btn btn-default"/>
             </div>
        </div>
        <div class="text-right">             
        <input type="button" id="btnZoomOut" value="-"  class="btn btn-default"/>
            <input type="button" id="btnZoomIn" value="+"  class="btn btn-default"/>
                <asp:HyperLink ID="btnCrop" runat="server" CssClass="btn btn-warning ">
                    <asp:Label ID="Label1" runat="server" Text="" CssClass="glyphicon glyphicon-scissors"></asp:Label>
                     

                </asp:HyperLink>
        
                   <asp:Button Text="Upload" OnClick="Upload" runat="server" CssClass="btn btn-primary" />
                </div>           
            </div>       
        <br />
        <br />
        </div>       
    </div>
    </form>
</body>
</html>

    <style>
        .container
        {
            position: absolute;
            top: 10%; left: 10%; right: 0; bottom: 0;
        }
        .action
        {
            width: 400px;
            height: 30px;
            margin: 10px 0;
        }
        .cropped>img
        {
            margin-right: 10px;
        }
    </style>