none
Convert Html string to image RRS feed

  • Question

  • Hi

    I wish to convert the html string to image and store it into a folder.

    eg

    string htmlString="<div><div>Test string</div><div>test 2</div></div>"

    how to convert the above string to image(.jpg)and store it into folder(we can give path and name ).

    how to directly convert it. without posting the above content into other page


    Anybody had familiar  with this please send the full code
    • Edited by Sudeesh IG Friday, August 29, 2014 10:07 AM
    Friday, August 29, 2014 8:34 AM

All replies

  • Convert html string to image?  I don't normally think of converting a string to an image.  But if you want to render the text of a string into an image then that's easy enough.  (However, the fact that your example string is HTML concerns me greatly.  It's non-trivial to render arbitrary HTML to an image and you would have to make many decisions about which engine will do the rendering work and how.)  But, just in case it's useful to you, let me answer the first part.  Depending on your actual needs, this may be sufficient.

    Again, the code fragment I'm about to give you is only for rendering a simple non-HTML string into an image.

    To do this, it's convenient to have a singleton Graphics object bound to a 1x1 bitmap that is only used for the purpose of measuring text.  This lets you measure the text before creating a bitmap to render the text into.

    public static class Measurement
    {
        private static Bitmap measurementBitmap;
        private static Graphics measurementGraphics;
    
        static Measurement()
        {
            measurementBitmap = new Bitmap( 1, 1, PixelFormat.Format32bppArgb );
            measurementGraphics = Graphics.FromImage( measurementBitmap );
        }
    
        public static Graphics Graphics
        {
            get
            {
                return measurementGraphics;
            }
        }
    }
    
    private static void RenderStringToJpeg( string htmlString, Color backgroundColor, Color textColor, Font font, string filename )
    {
        SizeF size = Measurement.Graphics.MeasureString( htmlString, font );
        Bitmap bm = new Bitmap( (int)Math.Ceiling( size.Width ), (int)Math.Ceiling( size.Height ), PixelFormat.Format32bppArgb );
        Graphics g = Graphics.FromImage( bm );
        g.Clear( backgroundColor );
        g.DrawString( htmlString, font, new SolidBrush( textColor ), new PointF( 0, 0 ) );
        bm.Save( filename, ImageFormat.Jpeg );
    }


    Example usage:

    static void Test()
    {
        string htmlString = "<div><div>Test string</div><div>test 2</div></div>";
        Color backgroundColor = Color.White;
        Color textColor = Color.Black;
        Font font = new Font( "Arial", 12.0f );
        string filename = "image.jpg";
    
        RenderStringToJpeg( htmlString, backgroundColor, textColor, font, filename );
    }

    Example results:

    But getting back to the original issue, I admit that this seems like it's not exactly what you want to do though because your text was HTML and something tells me that you actually want to render the HTML.

    The truth is that there's no trivial way to get there.  This is a huge undertaking because rendering HTML is what web browsers do and web browsers are huge pieces of software.  You have some options though.

    The most successful strategy for you is likely going to be using an existing web browser (like Internet Explorer), sizing it to some appropriate size and effectively taking a screenshot (scrape a section of the rendered window's contents).  Rather than launch the actual full browser, you would probably create a browser object within your application that hides its window and manages scraping the contents so that you have a little more direct control over the output.  NOTE: Depending on the content you are trying to render, this may or may not work as expected, particularly if plug-ins are involved.  Here's an example of someone that has done exactly that.  Another example is the WebViewBrush in WPF.

    Or if you want to go the whole distance and convert it directly (to use your original phrasing) you can take an open source HTML rendering engine like webkit and render the HTML yourself (huge undertaking). One example is PhantomJS, which is a headless webkit application.


    • Edited by Wyck Friday, August 29, 2014 12:08 PM Another example.
    Friday, August 29, 2014 12:04 PM
  • Hi  wyck 

    Actually i want is -

    it is web application, get some value as html . if the string assign to the any div in the page it shows correctly. i want to replace that view of html by image.

    I have a string that string hold some html ( like i had show above) . the html string is formatted like <div> and its width and alignment etc... i need the image (screen shot) how that string shown in the html


    Render string as html and convert that html to image dynamically.
    • Edited by Sudeesh IG Friday, August 29, 2014 12:45 PM
    Friday, August 29, 2014 12:33 PM
  • Do you want something like html2canvas?
    Friday, August 29, 2014 6:14 PM