I'm trying to create an image by drawing a text using a TTF font. I'm using .net core 2.1.500 on MacOS, and have mono-libgdiplus v5.6 (installed via brew).
The TTF file is Neo Sans Medium and this is my code (I tried with different TTF fonts, always with the same result)
using (var bmp = new Bitmap(1024, 512))
{
Graphics g = Graphics.FromImage(bmp);
g.Clear(Color.White);
var rectf = new RectangleF(0, 40, 1024, 90);
// If I specify a font that it doesn't know, it defaults to Verdana
var defaultFont = new Font("DefaultFont", 55);
Console.WriteLine($"defaultFont: {defaultFont.Name}"); // => defaultFont: Verdana
g.DrawString("Text with default", defaultFont, Brushes.Black, rectf);
var privateFontCollection = new PrivateFontCollection();
privateFontCollection.AddFontFile("/path/to/Neo_Sans_Medium.ttf");
var fontFamilies = privateFontCollection.Families;
var family = fontFamilies[0];
var familyHasRegular = family.IsStyleAvailable(FontStyle.Regular);
Console.WriteLine($"familyHasRegular: {familyHasRegular}"); // => familyHasRegular: true
var textFont = new Font(family, 55);
Console.WriteLine($"textFont: {textFont.Name}"); // => textFont: Neo Sans
var rectText = new RectangleF(0, 140, 1024 - 50 - 50, 1024 - 50 - 10);
g.DrawString("Text with loaded font", textFont, Brushes.Black, rectText);
g.Flush();
g.Save();
bmp.Save("test.png", ImageFormat.Png);
}
Since it printed textFont: Neo Sans, it seems to me that it was properly loaded (otherwise, it would have defaulted to Verdana).
However, the output I'm getting is this one:
Am I missing something?
I was able to do it using SixLabors.ImageSharp. I also installed SixLabors.Fonts and SixLabors.ImageSharp.Drawing.
With this code:
using (Image<Rgba32> image = new Image<Rgba32>(1024, 512))
{
FontCollection fonts = new FontCollection();
fonts.Install("/path/to/Neo_Sans_Medium.ttf");
var verdana = SystemFonts.CreateFont("Verdana", 55);
var neoSans = fonts.CreateFont("Neo Sans", 55);
image.Mutate(x => x
.BackgroundColor(Rgba32.White)
.DrawText("Text with default", verdana, Rgba32.Black, new PointF(0, 0))
.DrawText("Text with loaded font", neoSans, Rgba32.Black, new PointF(0, 65))
);
image.Save("out.png");
}
I was able to get this:
Hereby example of how to draw with a custom TTF font. No need to install the private font on this system.
The trick is loading the font in a PrivateFontCollection,
then create a new Font using the loaded FontFamily of the collection.
In this example I used a barcode font KixBarcode.
static Bitmap CreateBarcode(string text)
{
var collection = new PrivateFontCollection();
collection.AddFontFile(#"F:\Projects\Tools\Rtf2Pdf\KixBarcode.ttf");
var image = new Bitmap(300, 300);
var g = Graphics.FromImage(image);
var brush = new SolidBrush(Color.Black);
var font = new Font(collection.Families[0], 12);
g.Dispose();
return image;
}
I was able to get this working without switching to a different drawing library. Copy the FFT file to /usr/share/fonts/ and then switch to using a standard font instead of using PrivateFontCollection.
var font = new Font("Your Font Name", 50);
g.DrawString("Hello world", font, Brushes.Black, rectf);
Installing the font may seem like a "hack" but if you are deploying your app in a container it's as simple as copying the TTF in your Dockerfile.
Related
I am currently writing a .NET Core App to run cross-platform. Part of this is App is Drawing a Text and overlay onto a Bitmap.
So I added System.Drawing.Common and finally ended up with a working Code(On Windows) like this:
public static Bitmap WriteText(Bitmap bmp, string txt)
{
RectangleF rectf = new RectangleF(0, 0, bmp.Width, bmp.Height);
// Create graphic object that will draw onto the bitmap
using (Graphics g = Graphics.FromImage(bmp))
{
g.SmoothingMode = SmoothingMode.AntiAlias;
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
g.PixelOffsetMode = PixelOffsetMode.HighQuality;
g.TextRenderingHint = TextRenderingHint.AntiAliasGridFit;
StringFormat format = new StringFormat()
{
Alignment = StringAlignment.Center,
LineAlignment = StringAlignment.Center
};
// dampening
using (Brush brush = new SolidBrush(Color.FromArgb(69, Color.Black)))
g.FillRectangle(brush, rectf);
var fSize = 26;
var fFam = Fonts.GetDefaultFontName();
// Draw the path
GraphicsPath p = new GraphicsPath();
p.AddString(txt, fFam, (int)FontStyle.Regular, g.DpiX * fSize / 72.2f, rectf, format);
g.DrawPath(new Pen(Color.FromArgb(180, Color.Black), 8), p);
// Draw the text
g.DrawString(txt, new Font(fFam, fSize), Brushes.White, rectf, format);
// Flush all graphics changes to the bitmap
g.Flush();
}
// Now save or use the bitmap
return bmp;
}
On Windows Outputs are generated correctly or as expected like this for Example:
But when run on my Ubuntu/linux server, the GraphicsPath/Shadow would generate like this:
My first thought was an Error in the DPI-calculation since my Server doesn't have an X-Server installed but apparently the GraphicsPath is drawn correct; just the position is wrong?
*Editnote: Also the "Formatting" apparently works on the usual DrawString... so thats extra weird
Maybe I've missed something but this looks like a platform-specific bug to me?
I'd appreciate any help & opinions at this point... Thanks
I am trying to print 40x40mm labels from a programmatically created image.
The label must have text on it, and a logo. Since the label is fairly small I am finding myself fiddling with how to do proper smooting, antialias and such.
I have tried multipl settings but I am not sure it's even the right way to go about it.
First I draw the container Bitmap:
private Bitmap DrawLabelCircle()
{
var labelImage = new Bitmap(152, 152);
using (Graphics gfx = Graphics.FromImage(labelImage))
{
var pen = new Pen(Color.Black, 1);
gfx.SmoothingMode = SmoothingMode.AntiAlias;
gfx.DrawEllipse(pen, 1, 1, 150, 150);
}
return labelImage;
}
Then I overlay different text snippets on that container Bitmap
private Bitmap DrawDistributorTextRectangle(string text)
{
var bitmap = new Bitmap(113, 113);
var rectangle = new Rectangle(0, 0, 110, 110);
using (Graphics gfx = Graphics.FromImage(bitmap))
{
gfx.SmoothingMode = SmoothingMode.AntiAlias;
gfx.InterpolationMode = InterpolationMode.HighQualityBicubic;
gfx.PixelOffsetMode = PixelOffsetMode.HighQuality;
var font = new Font(FontFamily.GenericSansSerif, 5, FontStyle.Regular, GraphicsUnit.Point);
var brush = new SolidBrush(Color.Black);
gfx.TextRenderingHint = TextRenderingHint.AntiAlias;
gfx.DrawString(text, font, brush, rectangle);
}
bitmap.RotateFlip(RotateFlipType.Rotate270FlipNone);
return bitmap;
}
Overlay that text on the previous created Bitmap.
private Bitmap DistributorTextOverlay(Bitmap source, Bitmap overlay)
{
var result = new Bitmap(source.Width, source.Height);
var graphics = Graphics.FromImage(result);
graphics.CompositingMode = CompositingMode.SourceOver;
graphics.SmoothingMode = SmoothingMode.HighQuality;
graphics.DrawImage(source, 0, 0);
graphics.DrawImage(overlay, 120, 0);
return result;
}
And the I save it.
var imageCodecInfo = ImageCodecInfo.GetImageEncoders().First(encoder => encoder.MimeType == "image/png");
var encoderInfo = new EncoderParameters() { Param = { [0] = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 100L) } };
image.SetResolution(203, 203);
image.Save("img.png", imageCodecInfo, encoderInfo);
The big challenge here is that the image I get is actually looking alright, all things considered.
But when I print it, it looks terrible pixelated.
I would really like to give some pointers for what settings I should apply to all these bitmaps before saving the final result, and what settings should apply for the final image I save.
I am by no means a .NET graphics expert so all help is much appreciated.
40mm is 1.5748 inches. So if you plan to print it at 300 dpi resolution, your bitmap should be 1.5748*300 = 472 pixels instead of 152.
I have faced underline missing issue with if I only draw text (only spaces) with underline style. Please refer the below tried code at my end and let me know the solution to resolve this.
Bitmap bitmap = new Bitmap(400, 200);
Graphics graphics = Graphics.FromImage(bitmap);
Brush brush = new SolidBrush(Color.White);
graphics.FillRectangle(brush, 0, 0, 400, 200);
System.Drawing.Font font = new System.Drawing.Font("Arial", 12, FontStyle.Underline);
brush = new SolidBrush(Color.Black);
StringFormat stringformat = new StringFormat(StringFormat.GenericTypographic);
stringformat.FormatFlags |= StringFormatFlags.MeasureTrailingSpaces;
string text = "Hello";
SizeF sizeF = m_graphics.MeasureString(text, font, new PointF(0, 0), stringformat);
graphics.DrawString(text, font, brush, new RectangleF(0, 0, sizeF.Width, sizeF.Height), stringformat);
text = " ";
float width = sizeF.Width;
sizeF = m_graphics.MeasureString(text, font, new PointF(0, 0), stringformat);
graphics.DrawString(text, font, brush, new RectangleF(width, 0, sizeF.Width, sizeF.Height), stringformat);
text = "World";
width += sizeF.Width;
sizeF = m_graphics.MeasureString(text, font, new PointF(0, 0), stringformat);
graphics.DrawString(text, font, brush, new RectangleF(width, 0, sizeF.Width, sizeF.Height), stringformat);
As far as I can see you have three options:
Use a monospaced font (Courier New and Lucida Sans Typewriter). More info on the monospaced fonts here and here.
System.Drawing.Font font =
new System.Drawing.Font("Courier New", 12, FontStyle.Underline);
Write the text at once. If you only write the spaces then the method won't work, even if you use TextRenderer to draw the string. So if you receive the strings separately then I suggest add them in a StringBuilder and draw the whole text or sentence.
var sb = new StringBuilder();
sb.Append("Hello");
sb.Append(" ");
sb.Append("World!");
var bitmap = new Bitmap(400, 200);
var graphics = Graphics.FromImage(bitmap);
Brush brush = new SolidBrush(Color.White);
graphics.FillRectangle(brush, 0, 0, 400, 200);
var font = new Font("Arial", 12, FontStyle.Underline);
brush = new SolidBrush(Color.Black);
var stringformat = new StringFormat(StringFormat.GenericTypographic);
stringformat.FormatFlags = StringFormatFlags.MeasureTrailingSpaces;
stringformat.Trimming = StringTrimming.None;
var text = sb.ToString();
var sizeF = graphics.MeasureString(text, font, new PointF(0, 0), stringformat);
graphics.DrawString(text, font, brush,
new RectangleF(5, 0, sizeF.Width, sizeF.Height), stringformat);
The hack version: You can draw an invisible character such as (char)127 which is the delete character, like this (you can use the code from point 2 and add this line when initializing the StringBuilder):
sb.Append(new string ((char)127, 5)); //this will create approx. five spaces.
You can use other invisible characters if you need.
The 3rd options is a hack and should be considered as such, I would recommend option 1 if you can change the font otherwise option 2.
I know how to draw text on image in Emgu CV:
CvFont f = new MCvFont(Emgu.CV.CvEnum.FONT.CV_FONT_HERSHEY_COMPLEX_SMALL, 1, 1);
image.Draw("something", ref f, new Point(0, 0), new Rgb(0, 0, 0));
but I don't know how to use other fonts instead of CV_FONT_HARSHEY*
UPDATE:
This is complete solution:
var b = image.Bitmap;
Graphics g = Graphics.FromImage(b);
Font drawFont = new Font("Arial", 16);
SolidBrush drawBrush = new SolidBrush(Color.Black);
PointF drawPoint = new PointF(0,0);
g.DrawString("something,", drawFont, drawBrush, drawPoint);
/// after drawing etc.
image.Bitmap = b;
You can add TTF file in PrivateFontCollection
// 'PrivateFontCollection' is in the 'System.Drawing.Text' namespace
var foo = new PrivateFontCollection();
// Provide the path to the font on the filesystem
foo.AddFontFile("...");
var myCustomFont = new Font((FontFamily)foo.Families[0], 36f);
And then you draw image like this:
image.Draw("something", myCustomFont, new Point(0, 0), new Rgb(0, 0, 0));
Or you can use method from myCustomFont: Graphics.DrawString
// this solution draws test over a Mat image
{
var b = myMat.ToBitmap();
Graphics g = Graphics.FromImage(b);
Font drawMFont = new Font("Calibri", 8, FontStyle.Bold);
SolidBrush drawMBrush = new SolidBrush(Color.DarkCyan);
PointF drawMPoint = new PointF(1, 4);
g.DrawString("Hello",drawMFont,drawMBrush, drawMPoint);
}
I'm attempting to convert a text file to an image using a certain font (Courier New). The problem I'm having is that the font is fixed width, but the text is not being rendered that way on the image. Here's the code I'm currently using
var fontName = textToImageSection.GetString("FontName", "Courier New");
var fontSize = textToImageSection.GetInt("FontSize", 12);
textFont = new Font(fontName, fontSize);
var sf = new StringFormat(StringFormatFlags.MeasureTrailingSpaces);
sf.Trimming = StringTrimming.Character;
var text = File.ReadAllText(textFile.Path);
var image = new Bitmap(1, 1);
var textSize = new Size();
using (var g = Graphics.FromImage(image))
textSize = g.MeasureString(text, textFont, int.MaxValue, sf).ToSize();
image = new Bitmap(image, textSize);
using (var g = Graphics.FromImage(image))
{
g.Clear(Color.White);
//g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
g.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAliasGridFit;
g.DrawString(text, textFont, Brushes.Black, borderLeft, borderTop, sf);
}
image.SaveAsTiff(path);
I've been trying different values for TextRenderingHint without much luck and palying around with the StringFormat.
Here's the resulting image
Here's the text in Notepad++ displayed with Courier New Font