Search code examples
barcodeasp.net-core-2.0zxing.netimagesharp

How to create barcode image with ZXing.Net and ImageSharp in .Net Core 2.0


I'm trying to generate a barcode image. When I use the following code I can create a base64 string but it's giving a blank image. I checked the content is not blank or white space.

There are codes using CoreCompat.System.Drawing but I couldn't make it work because I am working in OS X environment.

Am I doing something wrong?

code:

  [HtmlTargetElement("barcode")] 
  public class BarcodeHelper: TagHelper { 
      public override void Process(TagHelperContext context, TagHelperOutput output) { 
          var content = context.AllAttributes["content"].Value.ToString(); 
          var alt = context.AllAttributes["alt"].Value.ToString(); 
          var width = 250;  
          var height = 250;
          var margin = 0; 
          var barcodeWriter = new ZXing.BarcodeWriterPixelData { 
              Format = ZXing.BarcodeFormat.CODE_128, 
                  Options = new QrCodeEncodingOptions { 
                      Height = height, Width = width, Margin = margin 
                  } 
          }; 

          var pixelData = barcodeWriter.Write(content); 

          using (var image = Image.LoadPixelData<Rgba32>(pixelData.Pixels, width, height))
          {
              output.TagName = "img"; 
              output.Attributes.Clear(); 
              output.Attributes.Add("width", width); 
              output.Attributes.Add("height", height); 
              output.Attributes.Add("alt", alt); 
              output.Attributes.Add("src", string.Format("data:image/png;base64,{0}", image.ToBase64String(ImageFormats.Png))); 
          }
      } 
  } 

There are some code snippets like below. They can write the content and easily convert the result data to base64 string. But when I call BarcodeWriter it needs a type <TOutput> which I don't know what to send. I am using ZXing.Net 0.16.2.

          var writer = BarcodeWriter // BarcodeWriter without <TOutput> is missing. There is BarcodeWriter<TOutput> I can call.
          {
              Format = BarcodeFormat.CODE_128 
          }

          var result = writer.write("content");

Solution

  • The current version (0.16.2) of the pixel data renderer uses a wrong alpha channel value. The whole barcode is transparent. Additionally with my version of ImageSharp I had to remove the following part "data:image/png;base64,{0}", because image.ToBase64String includes this already.

    Complete modified code:

      [HtmlTargetElement("barcode")] 
      public class BarcodeHelper: TagHelper { 
          public override void Process(TagHelperContext context, TagHelperOutput output) { 
              var content = context.AllAttributes["content"].Value.ToString(); 
              var alt = context.AllAttributes["alt"].Value.ToString(); 
              var width = 250;  
              var height = 250;
              var margin = 0; 
              var barcodeWriter = new ZXing.BarcodeWriterPixelData { 
                  Format = ZXing.BarcodeFormat.CODE_128, 
                  Options = new EncodingOptions { 
                      Height = height, Width = width, Margin = margin 
                  },
                  Renderer = new PixelDataRenderer {
                      Foreground = new PixelDataRenderer.Color(unchecked((int)0xFF000000)),
                      Background = new PixelDataRenderer.Color(unchecked((int)0xFFFFFFFF)),
                  }
              }; 
    
              var pixelData = barcodeWriter.Write(content); 
    
              using (var image = Image.LoadPixelData<Rgba32>(pixelData.Pixels, width, height))
              {
                  output.TagName = "img"; 
                  output.Attributes.Clear(); 
                  output.Attributes.Add("width", pixelData.Width); 
                  output.Attributes.Add("height", pixelData.Height); 
                  output.Attributes.Add("alt", alt); 
                  output.Attributes.Add("src", string.Format( image.ToBase64String(ImageFormats.Png))); 
              }
          } 
      } 
    

    It's also possible to use the ImageSharp binding package (ZXing.Net.Bindings.ImageSharp).

      [HtmlTargetElement("barcode")] 
      public class BarcodeHelper: TagHelper { 
          public override void Process(TagHelperContext context, TagHelperOutput output) { 
              var content = context.AllAttributes["content"].Value.ToString(); 
              var alt = context.AllAttributes["alt"].Value.ToString(); 
              var width = 250;  
              var height = 250;
              var margin = 0; 
              var barcodeWriter = new ZXing.ImageSharp.BarcodeWriter<Rgba32> { 
                  Format = ZXing.BarcodeFormat.CODE_128, 
                  Options = new EncodingOptions { 
                      Height = height, Width = width, Margin = margin 
                  }
              }; 
    
              using (var image = barcodeWriter.Write(content))
              {
                  output.TagName = "img"; 
                  output.Attributes.Clear(); 
                  output.Attributes.Add("width", image.Width); 
                  output.Attributes.Add("height", image.Height); 
                  output.Attributes.Add("alt", alt); 
                  output.Attributes.Add("src", string.Format( image.ToBase64String(ImageFormats.Png))); 
              }
          } 
      }