Convert Web Page to Image

Convert web page to image

Real answers:

http://cutycapt.sourceforge.net/

http://iecapt.sourceforge.net/

http://www.websitescreenshots.com/

http://www.princexml.com/

http://khtml2png.sourceforge.net/

http://linkpeek.com/

https://htmlcsstoimage.com/ (Uses Google Chrome)

https://gofullpage.com/ - Full Page Screen Capture (Chrome extension) - see this superuser answer for more info

(Don't know of one to use Mozilla's renderer, though.)

Convert webpage to image from ASP.NET

Ok, this was rather easy when I combined several different solutions:

These solutions gave me a thread-safe way to use the WebBrowser from ASP.NET:

http://www.beansoftware.com/ASP.NET-Tutorials/Get-Web-Site-Thumbnail-Image.aspx

http://www.eggheadcafe.com/tutorials/aspnet/b7cce396-e2b3-42d7-9571-cdc4eb38f3c1/build-a-selfcaching-asp.aspx

This solution gave me a way to convert BMP to JPG:

Bmp to jpg/png in C#

I simply adapted the code and put the following into a .cs:

using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Threading;
using System.Windows.Forms;

public class WebsiteToImage
{
    private Bitmap m_Bitmap;
    private string m_Url;
    private string m_FileName = string.Empty;

    public WebsiteToImage(string url)
    {
        // Without file 
        m_Url = url;
    }

    public WebsiteToImage(string url, string fileName)
    {
        // With file 
        m_Url = url;
        m_FileName = fileName;
    }

    public Bitmap Generate()
    {
        // Thread 
        var m_thread = new Thread(_Generate);
        m_thread.SetApartmentState(ApartmentState.STA);
        m_thread.Start();
        m_thread.Join();
        return m_Bitmap;
    }

    private void _Generate()
    {
        var browser = new WebBrowser { ScrollBarsEnabled = false };
        browser.Navigate(m_Url);
        browser.DocumentCompleted += WebBrowser_DocumentCompleted;

        while (browser.ReadyState != WebBrowserReadyState.Complete)
        {
            Application.DoEvents();
        }

        browser.Dispose();
    }

    private void WebBrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
    {
        // Capture 
        var browser = (WebBrowser)sender;
        browser.ClientSize = new Size(browser.Document.Body.ScrollRectangle.Width, browser.Document.Body.ScrollRectangle.Bottom);
        browser.ScrollBarsEnabled = false;
        m_Bitmap = new Bitmap(browser.Document.Body.ScrollRectangle.Width, browser.Document.Body.ScrollRectangle.Bottom);
        browser.BringToFront();
        browser.DrawToBitmap(m_Bitmap, browser.Bounds);

        // Save as file? 
        if (m_FileName.Length > 0)
        {
            // Save 
            m_Bitmap.SaveJPG100(m_FileName);
        }
    }
}

public static class BitmapExtensions
{
    public static void SaveJPG100(this Bitmap bmp, string filename)
    {
        var encoderParameters = new EncoderParameters(1);
        encoderParameters.Param[0] = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 100L);
        bmp.Save(filename, GetEncoder(ImageFormat.Jpeg), encoderParameters);
    }

    public static void SaveJPG100(this Bitmap bmp, Stream stream)
    {
        var encoderParameters = new EncoderParameters(1);
        encoderParameters.Param[0] = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 100L);
        bmp.Save(stream, GetEncoder(ImageFormat.Jpeg), encoderParameters);
    }

    public static ImageCodecInfo GetEncoder(ImageFormat format)
    {
        var codecs = ImageCodecInfo.GetImageDecoders();

        foreach (var codec in codecs)
        {
            if (codec.FormatID == format.Guid)
            {
                return codec;
            }
        }

        // Return 
        return null;
    }
}

And can call it as follows:

WebsiteToImage websiteToImage = new WebsiteToImage( "http://www.cnn.com", @"C:\Some Folder\Test.jpg");
websiteToImage.Generate();

It works with both a file and a stream. Make sure you add a reference to System.Windows.Forms to your ASP.NET project. I hope this helps.

UPDATE: I've updated the code to include the ability to capture the full page and not require any special settings to capture only a part of it.

Render HTML to an image

There is a lot of options and they all have their pro and cons.

Option 1: Use an API

• ApiFlash (based on chrome)
• EvoPDF (has an option for html)
• Grabzit
• HTML/CSS to Image API
• ...

Pros

• Execute Javascript
• Near perfect rendering
• Fast when caching options are correctly used
• Scale is handled by the APIs
• Precise timing, viewport, ...
• Most of the time they offer a free plan

Cons

• Not free if you plan to use them a lot

Option 2: Use one of the many available libraries

• dom-to-image
• wkhtmltoimage (included in the wkhtmltopdf tool)
• IMGKit (for ruby and based on wkhtmltoimage)
• imgkit (for python and based on wkhtmltoimage)
• python-webkit2png
• ...

Pros

• Conversion is quite fast most of the time

Cons

• Bad rendering
• Does not execute javascript
• No support for recent web features (FlexBox, Advanced Selectors, Webfonts, Box Sizing, Media Queries, ...)
• Sometimes not so easy to install
• Complicated to scale

Option 3: Use PhantomJs and maybe a wrapper library

• PhantomJs
• node-webshot (javascript wrapper library for PhantomJs)
• ...

Pros

• Execute Javascript
• Quite fast

Cons

• Bad rendering
• No support for recent web features (FlexBox, Advanced Selectors, Webfonts, Box Sizing, Media Queries, ...)
• Complicated to scale
• Not so easy to make it work if there is images to be loaded ...

Option 4: Use Chrome Headless and maybe a wrapper library

• Chrome Headless
• chrome-devtools-protocol
• Puppeteer (javascript wrapper library for Chrome headless)
• ...

Pros

• Execute Javascript
• Near perfect rendering

Cons

• Not so easy to have exactly the wanted result regarding:
  
  • page load timing
  • viewport dimensions
• Complicated to scale
• Quite slow and even slower if the html contains external links

Disclosure: I'm the founder of ApiFlash. I did my best to provide an honest and useful answer.

Is it possible to convert my webpage into image using jquery?

Yes. Use .innerHTML to get the HTML of your page as text, and put it inside <foreignObject> like stated in the tutorial:

var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +  '<foreignObject width="100%" height="100%">' +  document.querySelector('div').parentNode.innerHTML +  '</foreignObject>' +  '</svg>';
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();var svg = new Blob([data], {  type: 'image/svg+xml;charset=utf-8'});var url = DOMURL.createObjectURL(svg);
img.onload = function() {  ctx.drawImage(img, 0, 0);  DOMURL.revokeObjectURL(url);}
img.src = url;

<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">  <em>I</em> like  <span style="color:white; text-shadow:0 0 2px blue;">           cheese</span></div>
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas -->
<canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>