'HTML to Image - vertical text

I'm using library TheArtOfDev.HtmlRenderer to convert html to image and then send it to printer. The Html I need to convert contains vertical text and rounded edges rectangle that when I use the library it convert the image as added.

thanks for the help.

result image : https://imgur.com/a/jZz2uvn

html:

<html>
    <head>
        <style>
            #rcorners2 {
              border-radius: 25px;
              border: 2px solid black;
              padding: 20px;
              width: 200px;
              height: 150px;
            }

            .rotate {
                margin-top: 20%;
                font-weight: bolder;
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -o-transform: rotate(180deg);
                writing-mode: tb-rl;
                -ms-writing-mode: bt-rl;
            }
        </style>

    </head>
    <body>
        <div id="rcorners2">
            <label style="" class="rotate" >Limited</label>
        </div>

    </body>

</html>

C#: PrintDocument pd = new PrintDocument();

            pd.PrinterSettings.PrinterName = "printer"; 

            Image img = HtmlRender.RenderToImage(html);//, width, height

            img.Save(@"tmp\Test1.png", ImageFormat.Png);


            pd.PrintPage +=
                (object o, PrintPageEventArgs e) =>
                {

                    img.Save(@"tmp\Test1.png", ImageFormat.Png);

                    img = System.Drawing.Image.FromFile(@"tmp\Test1.png");

                    if (isFullBound)
                    {
                        e.Graphics.DrawImage(img, e.PageBounds);
                    }
                    else
                    {
                        Point loc = new Point(locationHeight, locationWidth);
                        e.Graphics.DrawImage(img, loc);
                    }




                    //e.Graphics.DrawImage(img,e.PageBounds);

                };

            pd.PrinterSettings.Copies = copies;

            pd.Print();
c++sharphtmlcssimage


Solution 1:[1]

Radius is not supported by the ArtOfDev library. So for my project It made sense to move to a paid library. I used Nreco HTML to Image Generator for .NET. And it's free for non SaaS products.

Testing border-radius code:

    var htmlToImage = new NReco.ImageGenerator.HtmlToImageConverter();
    Response.ContentType = "image/png";         
    Response.BinaryWrite( htmlToImage.GenerateImage(
        @"<div style='background-color:purple; width:60px;height:60px; border-radius:30px; text-align:center; vertical-align:middle; color:white; font-size:40px; '>FOO</div>", 
        NReco.ImageGenerator.ImageFormat.Png));
    Response.End();

https://www.nrecosite.com/html_to_image_generator_net.aspx

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions