Print Screen and save image automatically in C#

Question

It is possible to take a print screen of the active page of my web system and save that image somewhere using c#?

Answer 1

It is possible, with html2canvas, with some settings.

Example:

1) Webforms:

On your Webforms page put the references of html2canvas and jQuery with the following Javascript code:

<script src="/Scripts/jquery-1.8.2.js"></script>
<script src="/Scripts/html2canvas.js"></script>
<script type="text/javascript">
CopyBitmap = function () {
    html2canvas(document.body, {
        onrendered: function (canvas) {
            var dataUrl = canvas.toDataURL();
            $.post('Handler1.ashx', { 'data': dataUrl }, function (data) {
                if (data == "1") {
                    alert('Imagem enviada com sucesso');
                }
            });
        }
    });
};
</script>

Call the CopyBitmap on a button like this:

<button type="button" onclick="CopyBitmap();">Copiar</button>

This function will take from canvas a Base64 image that we will transfer in Ajax process to a file Handler1.ashx being responsible for the conversions of this Base64 to image and recording in the directory Fotos of the application:

public class Handler1 : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        String data = context.Request["data"].ToString();            
        String baseImg = Regex.Match(data, @"data:image/(?<type>.+?),(?<data>.+)").Groups["data"].Value;
        Byte[] baseBytes = Convert.FromBase64String(baseImg);
        System.IO.File.WriteAllBytes(context.Server.MapPath("~/Fotos/1-1.png") , baseBytes);            
        context.Response.ContentType = "text/plain";
        context.Response.Write("1");
    }

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

---

2) Web MVC:

In Web MVC C# is much more practical in the method Imagem set up in Controler Home receives and conversions needed by saving the image to a folder on the server (in this case in the folder Fotos).

View

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index - MVC</h2>
<h4>WEB MVC C#</h4>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/html2canvas.js"></script>
<script type="text/javascript">
        CopyBitmap = function () {
            html2canvas(document.body, {
                onrendered: function (canvas) {
                    var dataUrl = canvas.toDataURL();
                    $.post('/Home/Imagem', { 'data': dataUrl }, function (data) {
                        if (data == "1") {
                            alert('Imagem enviada com sucesso');
                        }
                    });
                }
            });
        };
  </script>
<button type="button" onclick="CopyBitmap();">Copiar</button>

Action:

public ActionResult Index()
{
    return View();
}
[HttpPost]
public JsonResult Imagem(String data)
{           
    String baseImg = Regex.Match(data, @"data:image/(?<type>.+?),(?<data>.+)").Groups["data"].Value;
    Byte[] baseBytes = Convert.FromBase64String(baseImg);
    System.IO.File.WriteAllBytes(Server.MapPath("~/Fotos/1-2-3.png"), baseBytes);
    return Json("1");
}