在ASP.net中将画布作为图像保存到服务器

<canvas id="myCanvas" width="400" height="200"></canvas>
<button onclick="saveCanvas()">保存画布</button>

<script>
function saveCanvas() {
  var canvas = document.getElementById("myCanvas");
  var dataURL = canvas.toDataURL(); // 获取画布的数据URL

  // 发送数据URL到后端保存
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "SaveCanvasImage.aspx", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      alert("画布已保存到服务器！");
    }
  };
  xhr.send("imageData=" + encodeURIComponent(dataURL));
}
</script>

protected void Page_Load(object sender, EventArgs e)
{
    if (Request.Form["imageData"] != null)
    {
        string imageData = Request.Form["imageData"];
        byte[] imageBytes = Convert.FromBase64String(imageData); // 将数据URL转换为字节数组

        string fileName = "canvas_image.png";
        string filePath = Server.MapPath("~/Images/" + fileName);
        File.WriteAllBytes(filePath, imageBytes); // 将字节数组保存为图像文件

        Response.Write("保存成功！");
    }
}