Hi nauna,
When you are using master page and content page then document.getElementById not working due to issue with the IDs of Controls. For more details to resolve the issue refer below article.
JavaScript document.getElementById not working with Master Page and Content Page in ASP.Net
Check the below example.
Master Page
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Content Page
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
CodeFile="CS.aspx.cs" Inherits="CS" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<input type="hidden" id="hfData" runat="server" />
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th>
Original Image
</th>
<th>
</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>
</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" />
<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.ClientID%>");
canvas = document.getElementById('canvas');
if (!canvas || !canvas.getContext) {
canvas.parentNode.removeChild(canvas);
} else {
img.style.position = 'absolute';
img.style.visibility = 'hidden';
}
RotateImage(0);
$('[id*=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.ClientID%>").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>
</asp:Content>
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);
}
Screenshot
