Search code examples
htmlcssasp.nettwitter-bootstrapnreco

NReco imagegenerator doesn't write barcodes correctly

I'm trying to convert HTML code to JPEG image. It kinda work, but it doesn't when I try to do it with barcodes.

Server side, I'm using :

I'm encoding an EAN133 barcode with CODE128 protocol, it works when I want to show it on a web page (I use HttpUtility.HtmlEncode(code_barre) so the barcode is well interpreted), then I'm using a barcode font to display the barcode, and that's where something is wrong with my image :

enter image description here

As you can see, it's a barcode "plain text" in the good format, and with the following CSS:

@font-face { font-family: 'code_128regular'; src: url('/Assets/Fonts/code128-webfont.eot'); src: url('/Assets/Fonts/code128-webfont.eot?#iefix') format('embedded-opentype'), url('/Assets/Fonts/code128-webfont.woff2') format('woff2'), url('code128-webfont.woff') format('woff'), url('/Assets/Fonts/code128-webfont.ttf') format('truetype'), url('/Assets/Fonts/code128-webfont.svg#code_128regular') format('svg'); font-weight: normal; font-style: normal;} .test{font-family:'code_128regular'; font-size:70px;}

I should become this :

enter image description here

But it doesn't, even if I import Bootstrap CSS with relative path, whereas it works when I try to generate a PDF with IronPDF

thanks for attention

EDIT : here's the HTML generated :

<html>
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
    <link rel='stylesheet' type='text/css' href='Assets/Bootstrap/css/bootstrap.min.css'>
    <script type='text/javascript' src='Assets/Bootstrap/js/bootstrap.min.js'></script>
</head>
<style>
    @font-face {
        font-family: 'code_128regular';
        src: url('/Assets/Fonts/code128-webfont.eot');
        src: url('/Assets/Fonts/code128-webfont.eot?#iefix') format('embedded-opentype'), url('/Assets/Fonts/code128-webfont.woff2') format('woff2'), url('code128-webfont.woff') format('woff'), url('/Assets/Fonts/code128-webfont.ttf') format('truetype'), url('/Assets/Fonts/code128-webfont.svg#code_128regular') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    .test {
        font-family: 'code_128regular';
        font-size: 70px;
    }
</style>
<center><p class='test'>&#204;MXCUTGRIP305-07D&#206;</p><p>MXCUTGRIP305-07</p></center>
</html>
Solution

  • NReco ImageGenerator internally uses wkhtmltoimage command line tool so actually you can expect the same behavior. In your case it seems your custom font is ignored by wkhtmltoimage for some reason; first of all try to use woff, woff2 or ttf font files instead of eot. If you use "GenerateImage" method which accepts HTML as .NET string all external references should be absolute.

    The following HTML template works fine for me (I've used "Libre Barcode 128" from google fonts):

    <html>
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Barcode+128&amp;lang=en" />  
</head>
<style>
    .test {
        font-family: 'Libre Barcode 128';
        font-size: 70px;
    }
</style>
<center><p class='test'>&#204;MXCUTGRIP305-07D&#206;</p><p>MXCUTGRIP305-07</p></center>
</html>