Develop Reference

Add text label with semi transparent background to an image using Magick.NET

I have some C# code that adds a simple text overlay with a border and semi-transparent background to an image. It works great, but I'm trying to get an equivalent result using Magick.NET. (The straight C# code drops the XMP tags from the original image, and I haven't found a way to deal with that.) Magick.NET handles the XMP tags well, but I'm having trouble replicating the original output.
Original code follows:
using (Image i = Image.FromStream(stream))
{
int width = i.Width;
int height = i.Height;
using (Graphics graphics = Graphics.FromImage(i))
{
string measureString = "my string";
Size stringSize = graphics.MeasureString(measureString, stringFont).ToSize();
Point drawLocation = new Point(width - stringSize.Width - 15, height - stringSize.Height - 15);
Rectangle rect = new Rectangle(drawLocation.X, drawLocation.Y, stringSize.Width, stringSize.Height);
graphics.DrawRectangle(blackPen, rect);
graphics.FillRectangle(fillBrush, rect);
graphics.DrawString(measureString, stringFont, Brushes.Yellow, drawLocation);
}
i.Save(outputFolder + Path.GetFileName(imgFileName));
}
I cobbled this together based on the Magick.NET examples. This get close to what I'm looking for, but adding the border removes the transparency value, and I'm left with a dark gray background, instead of the transparency.
var settings = new MagickReadSettings{
Font = "Calibri",
FillColor=MagickColors.Yellow,
StrokeColor=MagickColors.Black,
TextGravity = Gravity.Center,
BackgroundColor = new MagickColor("#66666699"),
BorderColor = MagickColors.Black,
Height = 250, // height of text box
Width = 680 // width of text box
};
using (var image = new MagickImage(inputFile))
{
using (var caption = new MagickImage($"caption:{myString}", settings))
{
//adding this border removes transparency
// caption.BorderColor = MagickColors.Black;
// caption.Border(1);
image.Composite(caption, Gravity.Southeast, CompositeOperator.Over);
image.Write(outputFile);
}
}

In command line ImageMagick, this seems to work for me in that the background color is transparent gray. The following the result may be what you want:
convert -font ubuntu -fill yellow -stroke black -gravity center -background "#66666699" -bordercolor black -size 250x680 caption:"This Is Some Text" result.png
Note: I used -background, not -backgroundcolor. Also BorderColor is not the color for the outline of the text. That is the stroke. You have not used BorderColor, since you have not specified the Border amount (as in -border in command line), which would outline the image rectangle and not the text.

Due to time constraints with my project, I took a slightly different path to make this work. I wound up creating the transparent overlay using my original .NET drawing code, and passing that as a memory stream to Magick.NET to handle the merge.
Workaround:
string measureString = "build custom string here";
using (var tmpStreamImg = new MemoryStream())
{
// Call custom function to get length of my string
System.Drawing.Size stringSize = MeasureString(measureString, stringFont).ToSize();
Rectangle rect = new Rectangle(0, 0, stringSize.Width, stringSize.Height);
using (Bitmap overlay = new Bitmap(rect.Width, rect.Height))
{
overlay.SetResolution(350, 350);
using (Graphics overlayGraphic = Graphics.FromImage(overlay))
{
overlayGraphic.DrawRectangle(blackPen, rect);
overlayGraphic.FillRectangle(fillBrush, rect);
overlayGraphic.DrawString(measureString, stringFont, Brushes.Yellow, 3, 3);
}
overlay.Save(tmpStreamImg, ImageFormat.Png);
}
tmpStreamImg.Position= 0;
using (var originalImage = new MagickImage(imgFileName))
{
using (var overlayImage = new MagickImage(tmpStreamImg))
{
originalImage.Composite(overlayImage, Gravity.Southeast, CompositeOperator.Over);
originalImage.Write(outputFolder + Path.GetFileName(imgFileName));
}
}
}

Graphics.DrawString doesn't work

I want to draw a text over a PictureBox in a foreach loop. This is the code that is responsible for rendering(GG is a PictureBox that is currently in the loop)
if (GG != null)
{
((PictureBox)GG).Image = (Image)obj;
using (Graphics g = ((PictureBox)GG).CreateGraphics()) {
g.DrawString(i["amount"].ToString(), kryptonRichTextBox1.Font,
new SolidBrush(Color.Gold), new Point(16, 18));
}
}
But sadly, the text is not rendered. If I comment out the
//((PictureBox)GG).Image = (Image)obj;
line, it does work! I have no idea how to get it to work.
I wanted to use the TextRenderer, but I don't know how to get an IDeviceContext of a control(and all examples I see on the internet use PaintEventArgs.Graphics in Paint event).
Also, if this is relevant, the GG PictureBox is a child of another picturebox, and has a transparent background.
I tried to refresh the box after invalidating, the working code:
if (GG != null)
{
((PictureBox)GG).Image = (Image)obj;
((PictureBox)GG).Invalidate();
((PictureBox)GG).Refresh();
using (Graphics g = ((PictureBox)GG).CreateGraphics()) {
g.DrawString(i["amount"].ToString(), kryptonRichTextBox1.Font,
new SolidBrush(Color.Gold), new Point(16, 18));
}
}

You modified the image content but the PictureBox is completely unaware of that. You didn't reassign its Image property. You will need to tell it that it needs to redraw the image as displayed on the screen. Add this line of code:
GG.Invalidate();

Just draw on a Bitmap and show it in the PictureBox:
// A new bitmap with the same size as the PictureBox
var bitmap = new Bitmap(pictureBox.Width, pictureBox.Height);
//Get the graphics objectm which we can use to draw
var graphics = Graphics.FromImage(bitmap);
//Draw stuff
graphics.DrawString(i["amount"].ToString(), kryptonRichTextBox1.Font,
new SolidBrush(Color.Gold), new Point(16, 18));
//Show the bitmap with graphics image in the PictureBox
pictureBox.Image = bitmap;

Image digidashboard = new Bitmap(Properties.Resources.digidashboard);
//using (Graphics g = ((PictureBox)pictureBoxDashboard).CreateGraphics())
//{
// g.DrawString("80.00", this.Font, new SolidBrush(Color.Red), 3, 6);
// pictureBoxUnlock.Image = digidashboard;
// pictureBoxDashboard.Invalidate();
//}
Graphics g = Graphics.FromImage(digidashboard);
g.DrawString("80.00", this.Font, new SolidBrush(Color.Red), 3, 6);
pictureBoxDashboard.Image = digidashboard;
According to StevenHouben's answer, I paste my C# version. It works fine. Thanks #StevenHouben.

Download generated bitmap image from ASP.NET website

I'm dynamically generating image from text, and existing image on my asp.net website.
Here is the code:
string barcode = Request.QueryString["BarCode"];
int w = barcode.Length * 40;
// Create a bitmap object of the width that we calculated and height of 100
Bitmap oBitmap = new Bitmap(w, 50);
// then create a Graphic object for the bitmap we just created.
Graphics oGraphics = Graphics.FromImage(oBitmap);
// Now create a Font object for the Barcode Font
// (in this case the IDAutomationHC39M) of 18 point size
Font oFont = new Font("BarcodeFont", 12);
// Let's create the Point and Brushes for the barcode
PointF oPoint = new PointF(2f, 2f);
SolidBrush oBrushWrite = new SolidBrush(Color.Black);
SolidBrush oBrush = new SolidBrush(Color.White);
// Now lets create the actual barcode image
// with a rectangle filled with white color
oGraphics.FillRectangle(oBrush, 0, 0, w, 100);
// We have to put prefix and sufix of an asterisk (*),
// in order to be a valid barcode
oGraphics.DrawString(barcode, oFont, oBrushWrite, oPoint);
// Then we send the Graphics with the actual barcode
Response.ContentType = "image/png";
oBitmap.Save(Response.OutputStream, ImageFormat.Png);
As you can see the bitmap is saved and showed on aspx page after postback. What I wanna do is when user click Button1, then image is generated and browser download window pops up, without saving on server or showing on page. How to do this? Please help me.

You should update your response like following:
Response.ContentType = "image/jpeg";
Response.AppendHeader("Content-Disposition","attachment; filename=downloadedFile.JPG");
Response.TransmitFile( #"c:/my documents/images/file.xxx" );
Response.End();
For more Information: http://www.west-wind.com/weblog/posts/2007/May/21/Downloading-a-File-with-a-Save-As-Dialog-in-ASPNET

Drawing Text on Image library

Is there any open source library for drawing text to image in C#? I have been strugling with TextRenderer and graphics.DrawString() whole day but I never got close to getting decent results, I tried every combination of Smoothing, Interpolation, TextRenderHint but quality is always semi-decent.
Here are some images and that is best I achived:
How it needs to look like:
This really looks good but with some strings seems like character spacing is wrong with some letters and the string leans.
Settings are:
objGraphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
objGraphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAliasGridFit;
objGraphics.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.GammaCorrected;
objGraphics.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
objGraphics.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.Half;
objGraphics.TextContrast = 0;
Format is Png and background is transparent, method is TextRenderer.Drawtext(). Seems like thickness of text is wrong, I assume it's something wrong with smoothing, when I try to bold text it stays almost the same, but only with font size of ~10px.

Here's what I use to add a Copyright watermark to photos uploaded to my website:
//Add Watermark to photo.
private System.Drawing.Image CreateWatermark(System.Drawing.Image imgPhoto, string Copyright)
{
Graphics g = Graphics.FromImage(imgPhoto);
g.SmoothingMode = SmoothingMode.HighQuality;
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
g.PixelOffsetMode = PixelOffsetMode.HighQuality;
foreach (PropertyItem pItem in imgPhoto.PropertyItems)
{
imgPhoto.SetPropertyItem(pItem);
}
int phWidth = imgPhoto.Width;
int phHeight = imgPhoto.Height;
//create a Bitmap the Size of the original photograph
Bitmap bmPhoto = new Bitmap(phWidth, phHeight, PixelFormat.Format24bppRgb);
bmPhoto.SetResolution(imgPhoto.HorizontalResolution, imgPhoto.VerticalResolution);
//load the Bitmap into a Graphics object
Graphics grPhoto = Graphics.FromImage(bmPhoto);
//------------------------------------------------------------
//Step #1 - Insert Copyright message
//------------------------------------------------------------
//Set the rendering quality for this Graphics object
grPhoto.SmoothingMode = SmoothingMode.AntiAlias;
//Draws the photo Image object at original size to the graphics object.
grPhoto.DrawImage(
imgPhoto, // Photo Image object
new Rectangle(0, 0, phWidth, phHeight), // Rectangle structure
0, // x-coordinate of the portion of the source image to draw.
0, // y-coordinate of the portion of the source image to draw.
phWidth, // Width of the portion of the source image to draw.
phHeight, // Height of the portion of the source image to draw.
GraphicsUnit.Pixel); // Units of measure
//-------------------------------------------------------
//to maximize the size of the Copyright message we will
//test multiple Font sizes to determine the largest posible
//font we can use for the width of the Photograph
//define an array of point sizes you would like to consider as possiblities
//-------------------------------------------------------
int[] sizes = new int[] { 16, 14, 12, 10, 8, 6, 4 };
Font crFont = null;
SizeF crSize = new SizeF();
//Loop through the defined sizes checking the length of the Copyright string
//If its length in pixles is less then the image width choose this Font size.
for (int i = 0; i < 7; i++)
{
//set a Font object to Arial (i)pt, Bold
crFont = new Font("arial", sizes[i], FontStyle.Bold);
//Measure the Copyright string in this Font
crSize = grPhoto.MeasureString(Copyright, crFont);
if ((ushort)crSize.Width < (ushort)phWidth)
break;
}
//Since all photographs will have varying heights, determine a
//position 5% from the bottom of the image
int yPixlesFromBottom = (int)(phHeight * .05);
//Now that we have a point size use the Copyrights string height
//to determine a y-coordinate to draw the string of the photograph
float yPosFromBottom = ((phHeight - yPixlesFromBottom) - (crSize.Height / 2));
//Determine its x-coordinate by calculating the center of the width of the image
float xCenterOfImg = (phWidth / 2);
//Define the text layout by setting the text alignment to centered
StringFormat StrFormat = new StringFormat();
StrFormat.Alignment = StringAlignment.Near;
//define a Brush which is semi trasparent black (Alpha set to 153)
SolidBrush semiTransBrush2 = new SolidBrush(System.Drawing.Color.FromArgb(153, 0, 0, 0));
//Draw the Copyright string
grPhoto.DrawString(Copyright, //string of text
crFont, //font
semiTransBrush2, //Brush
new PointF(xCenterOfImg + 1, yPosFromBottom + 1), //Position
StrFormat);
//define a Brush which is semi trasparent white (Alpha set to 153)
SolidBrush semiTransBrush = new SolidBrush(System.Drawing.Color.FromArgb(153, 255, 255, 255));
//Draw the Copyright string a second time to create a shadow effect
//Make sure to move this text 1 pixel to the right and down 1 pixel
grPhoto.DrawString(Copyright, //string of text
crFont, //font
semiTransBrush, //Brush
new PointF(xCenterOfImg, yPosFromBottom), //Position
StrFormat); //Text alignment
imgPhoto = bmPhoto;
return imgPhoto;
}

Using System.Drawing classes in ASP.NET is not supported.
Specifically, if you use it, under load from multiple threads, you will experience exceptions like this one:
Win32Exception: The operation completed successfully
at MS.Win32.HwndWrapper..ctor(Int32 classStyle, Int32 style, Int32 exStyle, Int32 x, Int32 y, Int32 width, Int32 height, String name, IntPtr parent, HwndWrapperHook[] hooks)
at System.Windows.Media.MediaContextNotificationWindow..ctor(MediaContext ownerMediaContext)
at System.Windows.Media.MediaContext..ctor(Dispatcher dispatcher)
That said, we discovered that marshaling all drawing operations to a single STA thread seemed to avoid these issues.
UPDATE: It's been five years and we still have no problem with this approach.

Remove Text from below of the BarCode in ASP.NET(C#)

I am generating the barcode generation of barcode is working fine barcode also read it perfectly.followin is the code for barcode generation:
private void GenerateBarCode(string codeInfo)
{
//Settings for the Image
string TypeFaceName = "IDAutomationHC39M";
string imageLocation = Server.MapPath("2010.png");
//The format of the image file
ImageFormat format = ImageFormat.Png;
//path of unique file name
string path = "D://MyProjects//RepeaterPaging//images//vijendra.png";
//REFERENCING A FONT
PrivateFontCollection fnts = new PrivateFontCollection();
fnts.AddFontFile("IDAutomationHC39M.ttf");
FontFamily fntfam = new FontFamily(TypeFaceName);
Font fnt = new Font(fntfam, 13);
fnts.AddFontFile("Arial.ttf");
FontFamily fntfam2 = new FontFamily("Arial", fnts);
//DRAWING THE IMAGE
Bitmap bmp = new Bitmap(960, 386); //Canvas size
Graphics g = Graphics.FromImage(bmp);
Bitmap orignBitmap = new Bitmap(imageLocation);
g.Clear(Color.Transparent); //Background color
SizeF bc = g.MeasureString(codeInfo, fnt);
Brush br = new SolidBrush(Color.Black);
g.DrawImage(orignBitmap, 10, 8);
g.DrawString(codeInfo, fnt, br, 585, 170); //Drawing the Image
g.TextRenderingHint=
bmp.Save(path, format); //Saving the Image file
bmp.Dispose(); //Releasing all resources (Image file)
Response.Clear();
}
alt text http://www.freeimagehosting.net/uploads/0e033f305b.png
Now I want to remove the text which is below of the barcode.
how can I do this?.

You can set Font = null; to remove text below barcode.
Barcode128 code128 = new Barcode128();
code128.CodeType = Barcode.CODE128;
code128.Code = "123456789";
code128.Font = null;

A better alternative might be to just use a font that doesn't have the text in the first place:
Try something like: Free Barcode Font - Code 39

You are creating the barcode using a font and the charcters under the bars are part of that font.
The only way to remove them would be to modify the bitmap (or crop it) after rendering the text; which requires knowing how big the final barcode is. Not impossible to do but a pain.