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);
}
Related
i created a function which is drawing a circle with a letter inside.
i write it into a stream and set it to picture box in Zoom Mode.
It looks nice but some pieces of the circle are cut off.
Here is the Code for the Circle:
public MemoryStream GenerateCircle(string name)
{
var avatarString = string.Format("{0}", name[0]).ToUpper();
var bgColour = ColorTranslator.FromHtml("#007FBC");
var bmp = new Bitmap(70, 70);
var sf = new StringFormat();
sf.Alignment = StringAlignment.Center;
sf.LineAlignment = StringAlignment.Center;
var font = new Font("Arial", 34, FontStyle.Bold, GraphicsUnit.Pixel);
var graphics = Graphics.FromImage(bmp);
graphics.Clear(Color.White);
graphics.SmoothingMode = SmoothingMode.AntiAlias;
graphics.TextRenderingHint = TextRenderingHint.AntiAliasGridFit;
Rectangle rect = new Rectangle(0, 0, 70, 70);
Brush b = new SolidBrush(bgColour);
Pen pen = new Pen(bgColour);
graphics.DrawEllipse(pen, rect);
graphics.FillEllipse(b, rect);
graphics.DrawString(avatarString, font, new SolidBrush(Color.WhiteSmoke), 35, 35, sf);
graphics.Flush();
var ms = new MemoryStream();
bmp.Save(ms, ImageFormat.Png);
return ms;
}
i set it like that:
avatarpicturebox.Image = Image.FromStream(GenerateCircle("Test"));
That is what it looks like:
Circle Cuts Off
Can someone help here please?
Just reduce the circle's width and height 1 pixel each to avoid clipping the right and bottom sides due to the pixels offset. Use Rectangle.Inflate method and pass negative width and height values to shrink the destination rectangle to fit.
Modifying your function to return a Bitmap instead of MemoryStream.
public Bitmap GenerateCircle(string name)
{
var bgColour = ColorTranslator.FromHtml("#007FBC");
var bmp = new Bitmap(70, 70, System.Drawing.Imaging.PixelFormat.Format32bppArgb);
using (var graphics = Graphics.FromImage(bmp))
using (var sf = new StringFormat())
using (var font = new Font("Arial", 34, FontStyle.Bold, GraphicsUnit.Pixel))
using (var b = new SolidBrush(bgColour))
using (var pen = new Pen(bgColour))
{
sf.Alignment = StringAlignment.Center;
sf.LineAlignment = StringAlignment.Center;
graphics.Clear(Color.White);
graphics.SmoothingMode = SmoothingMode.AntiAlias;
graphics.TextRenderingHint = TextRenderingHint.ClearTypeGridFit;
graphics.PixelOffsetMode = PixelOffsetMode.Half;
Rectangle rect = new Rectangle(Point.Empty, bmp.Size);
rect.Inflate(-2, -2);
graphics.DrawEllipse(pen, rect);
graphics.FillEllipse(b, rect);
graphics.DrawString(name.ToUpper(), font, Brushes.WhiteSmoke, rect, sf);
}
return bmp;
}
And the caller:
private void SomeButton_Click(object sender, EventArgs e)
{
avatarpicturebox.Image?.Dispose();
avatarpicturebox.Image = GenerateCircle("T");
}
Side Notes
Always dispose of the graphics objects you create either by calling explicitly the .Dispose method or by creating them with using keyword.
Use the Graphics.DrawString overloads that take a Rectangle and StringFormat params to draw the strings. Use the later to dictate how and where the string should be drawn in the given Rectangle. See also StringFormatFlags enum.
I 'm using the code below to print the barcode that gets generated in my C# WinForms, but the barcode scanner does not detect it, I've tried using code 128 font and code39 fonts with no luck, when I print using the bartender software it detects the barcode generated, just won't detect mine
here is the code
private void txtPprice_TextChanged(object sender, EventArgs e)
{
string barcode = txtCode.Text;
string price = txtPprice.Text;
string pname = txtPname.Text;
Bitmap bitm = new Bitmap(barcode.Length * 30, 90);
using (Graphics graphic = Graphics.FromImage(bitm))
{
Font newfont = new Font("IDAutomationHC39M", 10);
Font newfont2 = new Font("Arial Black", 8);
PointF point = new PointF(10f, 10f);
SolidBrush black = new SolidBrush(Color.Black);
SolidBrush white = new SolidBrush(Color.White);
graphic.FillRectangle(white, 0, 0, bitm.Width, bitm.Height);
graphic.DrawString("*" + barcode + "*", newfont, black, point);
PointF pointPrice = new PointF(45f, 55f);
graphic.DrawString("" + pname +"", newfont2, black, pointPrice);
PointF pointPname = new PointF(90f, 75f);
graphic.DrawString("" + price + " L.E.", newfont2, black, pointPname);
PointF pointBcode = new PointF(20f, 75f);
graphic.DrawString("" + barcode + "", newfont2, black, pointBcode);
}
using (MemoryStream Mmst = new MemoryStream())
{
bitm.Save("ms", ImageFormat.Jpeg);
pictureBox1.Image = bitm;
pictureBox1.Width = bitm.Width;
pictureBox1.Height = bitm.Height;
}
}
I have tried adding and removing the * as suggested in other posts, also changing the font size from 8p went one by one till 28px, but still no luck
the scanner and the printer are working fine on the bartender application
The code used in the example below is 5094411
Here is an image, the textbox highlighted in red is where the string barcode is coming from
and you can see in the image that in the picturebox it shows 5094411 in both IDautomationHC39M font (the barcode font) and again below it in Arial
This is the correct code that after some tries with the help of Jimi here I was able to get this part right
string Barcode = "*"+txtCode.Text+"*";
string price = txtPprice.Text;
string pname = txtPname.Text;
using (Bitmap bitmap = new Bitmap(350, 220))
{
bitmap.SetResolution(240, 240);
using (Graphics graphics = Graphics.FromImage(bitmap))
{
Font font = new Font("IDAutomationHC39M", 10, FontStyle.Regular, GraphicsUnit.Point);
graphics.Clear(Color.White);
StringFormat stringformat = new StringFormat(StringFormatFlags.NoWrap);
graphics.TextRenderingHint = TextRenderingHint.AntiAliasGridFit;
graphics.TextContrast = 10;
SolidBrush black = new SolidBrush(Color.Black);
SolidBrush white = new SolidBrush(Color.White);
PointF TextPosition = new PointF(45F, 10F);
SizeF TextSize = graphics.MeasureString(Barcode, font, TextPosition, stringformat);
PointF pointPrice = new PointF(90f, 125f);
Font newfont2 = new Font("Cambria", 8, FontStyle.Regular, GraphicsUnit.Point);
Font newfont3 = new Font("Arial Black", 10, FontStyle.Regular, GraphicsUnit.Point);
graphics.DrawString("" + pname + "", newfont3, black, pointPrice);
PointF pointPname = new PointF(200f, 170f);
graphics.DrawString("" + price + " L.E.", newfont3, black, pointPname);
PointF pointBcode = new PointF(35f, 170f);
graphics.DrawString("" + Barcode + "", newfont2, black, pointBcode);
if (TextSize.Width > bitmap.Width)
{
float ScaleFactor = (bitmap.Width - (TextPosition.X / 2)) / TextSize.Width;
graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
graphics.ScaleTransform(ScaleFactor, ScaleFactor);
}
graphics.DrawString(Barcode, font, new SolidBrush(Color.Black), TextPosition, StringFormat.GenericTypographic);
bitmap.Save(#"barcode.png", ImageFormat.Png);
this.pictureBox1.Image = (Bitmap)bitmap.Clone();
font.Dispose();
}
}
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 have been searching and looking for Drawing text with outline onto images?
Here my code
private static void tulisnamafile(string imagepath, string textnya)
{
Image image = Image.FromStream(new MemoryStream(File.ReadAllBytes(imagepath)));
Bitmap newImage = new Bitmap(640, 380);
using (Graphics g = Graphics.FromImage(newImage))
{
// Draw base image
g.DrawImageUnscaled(image, 0, 0);
//Static is HERE
SolidBrush brushing = new SolidBrush(Color.White);
Font font = new Font(("Comic Sans MS"), 20.0f);
int napoint = newImage.Height - 90;
int napointa = image.Width - 200;
FontFamily ff = new FontFamily("Times New Roman");
int fontSize = 24;
Font f = new Font(ff, fontSize, FontStyle.Regular);
StringFormat sf = new StringFormat();
Rectangle displayRectangle = new Rectangle(new Point(5, napoint), new Size(newImage.Width - 1, newImage.Height - 1));
g.DrawEllipse(Pens.Magenta, new Rectangle(0, 0, 1, 1));
GraphicsPath gp = new GraphicsPath();
gp.AddString(textnya, ff, (int)FontStyle.Bold, fontSize + 4, new Point(0, 0), sf);
g.FillPath(Brushes.White, gp);
g.DrawPath(Pens.Black, gp);
g.Flush(FlushIntention.Sync);
g.Dispose();
}
image.Dispose();
string fileName = "ab.jpg";
string path = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, fileName);
MessageBox.Show(path);
newImage.Save(path, System.Drawing.Imaging.ImageFormat.Jpeg);
newImage.Dispose();
}
and Its the trigger
private void button3_Click(object sender, EventArgs e)
{
string imagename = "C:\\Documents and Settings\\admin\\My Documents\\Visual Studio 2008\\Projects\\template\\template\\bin\\Debug\\bg.jpg";
tulisnamafile(imagename, "SlimPort® SP1002; Connect mobile devices to any big screen. High Speed micro USB");
}
Check the Code result:
Such messing result, UNWRAPPED and with white color
This what I want, and with wrapping?
I found in CodeProject but not luck, its using C++. Based someone in neowin and tried this one too..
But still not luck.
UPDATE:
Here my working code, for who maybe need it... based from Abdias Software's code ( check the answers ), I make small changes ( there some error in those code).
private static void tulisnamafile(string imagepath, string textnya)
{
float fontSize = 22;
Image image = Image.FromStream(new MemoryStream(File.ReadAllBytes(imagepath)));
//some test image for this demo
Bitmap bmp = (Bitmap)Image.FromFile(imagepath);
Graphics g = Graphics.FromImage(bmp);
//this will center align our text at the bottom of the image
StringFormat sf = new StringFormat();
sf.Alignment = StringAlignment.Center;
sf.LineAlignment = StringAlignment.Far;
//define a font to use.
Font f = new Font("Impact", fontSize, FontStyle.Bold, GraphicsUnit.Pixel);
//pen for outline - set width parameter
Pen p = new Pen(ColorTranslator.FromHtml("#77090C"), 8);
p.LineJoin = LineJoin.Round; //prevent "spikes" at the path
//this makes the gradient repeat for each text line
Rectangle fr = new Rectangle(0, bmp.Height - f.Height, bmp.Width, f.Height);
LinearGradientBrush b = new LinearGradientBrush(fr,
ColorTranslator.FromHtml("#FF6493"),
ColorTranslator.FromHtml("#D00F14"),
90);
//this will be the rectangle used to draw and auto-wrap the text.
//basically = image size
Rectangle r = new Rectangle(0, 0, bmp.Width, bmp.Height);
GraphicsPath gp = new GraphicsPath();
//look mom! no pre-wrapping!
gp.AddString(textnya, f.FontFamily, (int)FontStyle.Bold, fontSize, r, sf);
//these affect lines such as those in paths. Textrenderhint doesn't affect
//text in a path as it is converted to ..well, a path.
g.SmoothingMode = SmoothingMode.AntiAlias;
g.PixelOffsetMode = PixelOffsetMode.HighQuality;
//TODO: shadow -> g.translate, fillpath once, remove translate
g.DrawPath(p, gp);
g.FillPath(b, gp);
//cleanup
gp.Dispose();
b.Dispose();
b.Dispose();
f.Dispose();
sf.Dispose();
g.Dispose();
string fileName = "ab.jpg";
string path = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, fileName);
bmp.Save(path, System.Drawing.Imaging.ImageFormat.Jpeg);
bmp.Dispose();
}
Just to sum up:
Define a GraphicPath and then use DrawPath to draw outlined version of text, FillPath to draw a filled version.
For the second image with the woman, a second (filled) version is drawn first at a small offset.
For the gradient use LinearGradientBrush for brush. Thickness of the outline is defined by the Pen's thickness.
For wrapping define a StringFormat and use a Rectangle to define the region you want the text to be in.
To center the text you can define the rectangle to have the same width as the image, then set strformat.Alignment to Center.
UPDATE: To replicate the text in the second image you can use this code:
float fontSize = 52;
//some test image for this demo
Bitmap bmp = (Bitmap)Image.FromFile(s"test.jpg");
Graphics g = Graphics.FromImage(bmp);
//this will center align our text at the bottom of the image
StringFormat sf = new StringFormat();
sf.Alignment = StringAlignment.Center;
sf.LineAlignment = StringAlignment.Far;
//define a font to use.
Font f = new Font("Impact", fontSize, FontStyle.Bold, GraphicsUnit.Pixel);
//pen for outline - set width parameter
Pen p = new Pen(ColorTranslator.FromHtml("#77090C"), 8);
p.LineJoin = LineJoin.Round; //prevent "spikes" at the path
//this makes the gradient repeat for each text line
Rectangle fr = new Rectangle(0, bmp.Height - f.Height, bmp.Width, f.Height);
LinearGradientBrush b = new LinearGradientBrush(fr,
ColorTranslator.FromHtml("#FF6493"),
ColorTranslator.FromHtml("#D00F14"),
90);
//this will be the rectangle used to draw and auto-wrap the text.
//basically = image size
Rectangle r = new Rectangle(0, 0, bmp.Width, bmp.Height);
GraphicsPath gp = new GraphicsPath();
//look mom! no pre-wrapping!
gp.AddString("Demo for Stack Overflow",
f.FontFamily, (int)f.Style, fontSize, r, sf);
//these affect lines such as those in paths. Textrenderhint doesn't affect
//text in a path as it is converted to ..well, a path.
g.SmoothingMode = SmoothingMode.AntiAlias;
g.PixelOffsetMode = PixelOffsetMode.HighQuality;
//TODO: shadow -> g.translate, fillpath once, remove translate
g.DrawPath(p, gp);
g.FillPath(b, gp);
//cleanup
gp.Dispose();
b.Dispose();
b.Dispose();
f.Dispose();
sf.Dispose();
g.Dispose();
bmp.Save(s"test_result.jpg", System.Drawing.Imaging.ImageFormat.Jpeg);
bmp.Dispose();
This will produce this result:
To produce the extra "shadow" just translate the gfirst, draw filled, then remove the translation.
The FromHtml is used here as I picked the colors from your image and was to lazy to convert. Just use Color.FromARGB() or a fixed color - as you want.
VB version:
Dim fontSize As Single = 52
Dim bmp As Bitmap = Bitmap.FromFile("c:\test.jpg")
Dim g As Graphics = Graphics.FromImage(bmp)
Dim sf As New StringFormat(StringFormatFlags.NoClip)
sf.Alignment = StringAlignment.Center
sf.LineAlignment = StringAlignment.Far
Dim f As New Font("Impact", fontSize, FontStyle.Bold, GraphicsUnit.Pixel)
Dim p As New Pen(ColorTranslator.FromHtml("#77090C"), 4)
p.LineJoin = LineJoin.Round
'rectangle for font to repeat gradient for each line
Dim fr As New Rectangle(0, bmp.Height - f.Height, bmp.Width, f.Height)
Dim b As New LinearGradientBrush(fr,
ColorTranslator.FromHtml("#FF6493"),
ColorTranslator.FromHtml("#D00F14"),
90)
Dim r As New Rectangle(0, 0, bmp.Width, bmp.Height)
Dim gp As New GraphicsPath
gp.AddString("Demo for Stack Overflow",
f.FontFamily,
f.Style,
fontSize,
r,
sf)
g.SmoothingMode = SmoothingMode.AntiAlias
g.PixelOffsetMode = PixelOffsetMode.HighQuality
g.DrawPath(p, gp)
g.FillPath(b, gp)
gp.Dispose() 'path
b.Dispose() 'b
b.Dispose() 'p
f.Dispose() 'font
sf.Dispose() 'stringformat
g.Dispose() 'g
bmp.Save("c:\test_result.jpg", Imaging.ImageFormat.Jpeg)
bmp.Dispose()
A simple way to get "better" results could be to draw the text twice. Draw the shadow first, for example some pixels to the right and to the bottom, if you want the classic drop-shadow look, in gray color. You may also want to consider using a different font, any font without serifs will look better i would guess.
For the gradient effect see the msdn page or google how on how to use it.
Also, play around with the SmoothingMode and TextRenderingHint of the graphics object, HighQuality and Antialias should produce better looking results.
I am generating ICards for employees.
I have to write address of the employee on the ICard.
Image blankICard = Image.FromFile(#"C:\Users\admin\Pictures\filename.jpg");
Bitmap outputImage = new Bitmap(blankICard.Width, blankICard.Height, System.Drawing.Imaging.PixelFormat.Format32bppArgb);
System.Drawing.SolidBrush b = new SolidBrush(Color.FromArgb(255, 88, 89, 91));
using (Graphics graphics = Graphics.FromImage(outputImage))
{
graphics.DrawImage(blankICard, new Rectangle(0, 0, blankICard.Width, blankICard.Height),
new Rectangle(new Point(), blankICard.Size), GraphicsUnit.Pixel);
Font stringFont = new Font("FreightSans Medium", 20, FontStyle.Regular);
string address = "Address goes here";
graphics.DrawString(address, new Font("FreightSans Medium", 20, FontStyle.Regular), b, new Point(621, 234));
graphics.DrawString("Employee Code:12345678", new Font("FreightSans Medium", 26, FontStyle.Regular), b, new Point(350, 407));
}
Current Output is shown in the left side of the image.
Here what happens that my string goes out of the box.
I want to bind it in the fix size box.
Example is shown in the right side of the Image.
Use Graphics.DrawString overload that takes Rectangle instead of a point. That way you'll wrap text to fit within specified width.
using (Graphics graphics = Graphics.FromImage(outputImage)){
// Draw whatever you need first
// ....
// Create font...
graphics.DrawString(employeeCode, font, Brushes.Black,
new Rectangle(0, 25, maxWidth, maxHeight);
}
Simple as that :)
I made some changes to your code, commenting 2 lines - I did not have the file C:\Users\admin\Pictures\filename.jpg on my pc - That's why blankICard was disabled and so was its Rectangle:
You must set maxWidth in order to wrap your employee code, for example.
// Image blankICard = Image.FromFile(#"C:\Users\admin\Pictures\filename.jpg");
int width = 500;
int height = 500;
Bitmap outputImage = new Bitmap(width, height,PixelFormat.Format32bppArgb);
SolidBrush b = new SolidBrush(Color.FromArgb(255, 88, 89, 91));
SolidBrush blackBrush = new SolidBrush(Color.Black);
using (Graphics graphics = Graphics.FromImage(outputImage))
{
graphics.DrawRectangle(new Pen(blackBrush), new Rectangle(0, 0, width, height));
// new Rectangle(new Point(), blankICard.Size), GraphicsUnit.Pixel);
Font stringFont = new Font("FreightSans Medium", 20, FontStyle.Regular);
string address = "Address goes here";
string employeeCode = "Employee Code:12345678";
int maxWidth = 30;
SizeF sf = graphics.MeasureString(employeeCode, new Font(new FontFamily("FreightSans Medium"), 26), maxWidth);
graphics.DrawString(address, new Font("FreightSans Medium", 20, FontStyle.Regular), b, new Point(0, 0));
graphics.DrawString(employeeCode, new Font(new FontFamily("FreightSans Medium"), 26), Brushes.Black,new RectangleF(new PointF(0, 25), sf),StringFormat.GenericTypographic);
//graphics.DrawString(, new Font("FreightSans Medium", 26, FontStyle.Regular), b, new Point(10, 20));
}