Getting black screen shot using screen capture method in c#

Question

I am using screen capture method in my c# hands on. In local project everything is working fine. But when I am publishing my application to live domain then I am getting black screen shot.

I am using below two ways for active window screen capturing 1) http://www.tutorialized.com/tutorial/How-to-capture-web-page-screenshot-in-asp.net-using-c/67952 2) http://www.c-sharpcorner.com/article/screen-capture-and-save-as-an-image/

Above methods is working fine in local project. But after publishing screenshot is saving into drive but getting with black color (empty).

Your answers will be appreciated.

Answer 1

The projects are intended to be used on a desktop environment, not on a web page (project on the first link is completely wrong!).

You get a black screen because you capture the screen where the application is running, so you get the screen of the server, and if there is no user logged in, the screen is black!

You can't use this code to capture remote web client screen.

try to use the WebBrowser control instead and render the result on a bitmap:

<asp:TextBox ID="txtUrl" runat="server" Text = "" />
<asp:Button Text="Capture" runat="server" OnClick="Capture" />
<br />
<asp:Image ID="imgScreenShot" runat="server" Height="300" Width="400" Visible = "false" />

code-behind:

using System.IO;
using System.Drawing;
using System.Threading;
using System.Windows.Forms;
protected void Capture(object sender, EventArgs e)
{
    string url = txtUrl.Text.Trim();
    Thread thread = new Thread(delegate()
    {
        using (WebBrowser browser = new WebBrowser())
        {
            browser.ScrollBarsEnabled = false;
            browser.AllowNavigation = true;
            browser.Navigate(url);
            browser.Width = 1024;
            browser.Height = 768;
            browser.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(DocumentCompleted);
            while (browser.ReadyState != WebBrowserReadyState.Complete)
            {
                System.Windows.Forms.Application.DoEvents();
            }
        }
    });
    thread.SetApartmentState(ApartmentState.STA);
    thread.Start();
    thread.Join();
}

private void DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
    WebBrowser browser = sender as WebBrowser;
    using (Bitmap bitmap = new Bitmap(browser.Width, browser.Height))
    {
        browser.DrawToBitmap(bitmap, new Rectangle(0, 0, browser.Width, browser.Height));
        using (MemoryStream stream = new MemoryStream())
        {
            bitmap.Save(stream, System.Drawing.Imaging.ImageFormat.Png);
            byte[] bytes = stream.ToArray();
            imgScreenShot.Visible = true;
            imgScreenShot.ImageUrl = "data:image/png;base64," + Convert.ToBase64String(bytes);
        }
    }
}

Answer 2

The actual question seems to be "how can I capture a screenshot using Javascript"? This is already answered in a previous SO question, Using HTML5/Canvas/JavaScript to take screenshots. The answer uses the html2canvas library to read a page's DOM and render an image using Canvas.

The following code for example, will capture the current page and post the result at the page's bottom:

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});

To render a different element, pass it to html2canvas instead of document.body:

html2canvas(someElement,...);

Rendering an IFRAME though can be a problem, because its contents are not part of the page and hence the DOM. Javascript simply doesn't have access to its contents. This is answered in this SO question and mentioned as a limitation of html2canvas.