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

Question

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");

Answer 1

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)));
}
}
}