Rotate Image and save in Folder (Directory) on Server in ASP.Net

Hi nauna,

Check this example. Now please take its reference and correct your code.

HTML

<input type="hidden" id="hfData" runat="server" />
<table>
    <tr>
        <th>
            Original Image
        </th>
        <th>
            &nbsp;
        </th>
        <th>
            Image after Rotated
        </th>
    </tr>
    <tr>
        <td>
            <asp:Image ID="image" ImageUrl="~/Images/Test.jpg" runat="server" class="north" />
            <canvas id="canvas"></canvas>
        </td>
        <td>
            &nbsp;
        </td>
        <td>
            <asp:Image ID="Image1" ImageUrl="~/Output/Test.jpg" runat="server" />
        </td>
    </tr>
    <tr>
        <td colspan="3" align="center">
            <br />
            <input id="btnRotate" type="button" name="name" value="Rotate" />&nbsp;
            <asp:Button ID="btnSave" Text="Save" runat="server" OnClick="Save" />
        </td>
    </tr>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    var img = null, canvas = null;
    $(function () {
        img = document.getElementById('image');
        canvas = document.getElementById('canvas');
        if (!canvas || !canvas.getContext) {
            canvas.parentNode.removeChild(canvas);
        } else {
            img.style.position = 'absolute';
            img.style.visibility = 'hidden';
        }
        RotateImage(0);
        $('#btnRotate').click(function () {
            if (img.className == "north") {
                RotateImage(90);
                img.className = "west";
            }
            else if (img.className == "west") {
                RotateImage(180);
                img.className = "south";
            }
            else if (img.className == "south") {
                RotateImage(270);
                img.className = "east";
            }
            else if (img.className == "east") {
                RotateImage(0);
                img.className = "north";
            }
        });
    });

    function RotateImage(degree) {
        if (document.getElementById('canvas')) {
            var context = canvas.getContext('2d');
            var cw = img.width, ch = img.height, cx = 0, cy = 0;
            switch (degree) {
                case 90:
                    cw = img.height;
                    ch = img.width;
                    cy = img.height * (-1);
                    break;
                case 180:
                    cx = img.width * (-1);
                    cy = img.height * (-1);
                    break;
                case 270:
                    cw = img.height;
                    ch = img.width;
                    cx = img.width * (-1);
                    break;
            }
            canvas.setAttribute('width', cw);
            canvas.setAttribute('height', ch);
            context.rotate(degree * Math.PI / 180);
            context.drawImage(img, cx, cy);
            document.getElementById('hfData').value = canvas.toDataURL();
        }
        else {
            switch (degree) {
                case 0:
                    image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';
                    break;
                case 90:
                    image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
                    break;
                case 180:
                    image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
                    break;
                case 270:
                    image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
                    break;
            }
        }
    }
</script>

C#

protected void Save(object sender, EventArgs e)
{
    string base64String = hfData.Value.Replace("data:image/png;base64,", string.Empty);
    byte[] bytes = Convert.FromBase64String(base64String);
    string filePath = Server.MapPath("~/Output/" + "Test.jpg");
    System.IO.File.WriteAllBytes(filePath, bytes);
    Response.Redirect(Request.Url.AbsoluteUri);
}

VB.Net

Protected Sub Save(ByVal sender As Object, ByVal e As EventArgs)
    Dim base64String As String = hfData.Value.Replace("data:image/png;base64,", String.Empty)
    Dim bytes As Byte() = Convert.FromBase64String(base64String)
    Dim filePath As String = Server.MapPath("~/Output/" & "Test.jpg")
    System.IO.File.WriteAllBytes(filePath, bytes)
    Response.Redirect(Request.Url.AbsoluteUri)
End Sub

Screenshot

Using the below link i have created the example.

https://stackoverflow.com/questions/35336833/jquery-rotate-an-image-and-save-them-with-same-name-file-overwrite