Develop Reference

How can the font size and the position of the watermark text in an image based on image size set?

How can the font size and the position of the watermark text in an image based on image size set?
I'm looking for a solution to alter the font size according to the image size.
also Transparent watermark.
my function:
public void fn_TextWaterMark(string text,ImageFormat fmt)
{
string sourceImage = "c:\\a.jpg;
string targetImage = "c:\\a-watermark.jpg;
try
{
//open source image as stream and create a memorystream for output
FileStream source = new FileStream(sourceImage, FileMode.Open);
Stream output = new MemoryStream();
Image img = Image.FromStream(source);
//choose font for text
Font font = new Font("Times New Roman", 20, FontStyle.Bold, GraphicsUnit.Pixel);
//choose color and transparency
Color color = Color.FromArgb(255, 255, 255, 255);
//location of the watermark text in the parent image
default//Point pt = new Point(100, 100);
Point pt = new Point(img.Width*31/100, img.Height*46/100);
SolidBrush brush = new SolidBrush(color);
//draw text on image
Graphics graphics = Graphics.FromImage(img);
graphics.DrawString(text, font, brush, pt);
graphics.Dispose();
//update image memorystream
img.Save(output, fmt);
Image imgFinal = Image.FromStream(output);
//write modified image to file
Bitmap bmp = new System.Drawing.Bitmap(img.Width,img.Height, img.PixelFormat);
Graphics graphics2 = Graphics.FromImage(bmp);
graphics2.DrawImage(imgFinal, new Point(0,0));
bmp.Save(targetImage, fmt);
imgFinal.Dispose();
img.Dispose();
}
catch (Exception ex)
{
MessageBox.Show(ex.Message);
}
}
pic examp:
http://i.stack.imgur.com/ZShUI.jpg
http://i.stack.imgur.com/GUfbM.jpg
thanks

Adding footer to image in C#

I am using GetUserMedia API to capture image and draw it to canvas. Using toDataURL() of canvas I get the "ImageUrl". The url is saved as png image to local file. What I am looking is that before saving the image add some comment about image at bottom of image(not over the image) like a footer. I have the below code. Can any one suggest me how to do this in c#.
imageByte= Convert.FromBase64String(ImageUrl);
using (var streamBitmap = new MemoryStream(imageByte))
{
using (var img = Image.FromStream(streamBitmap))
{
img.Save(localPath);
}
}

You can create new Bitmap which will be higher from the original image to fit also the footer below. Next copy the original image and footer to that bitmap and save the new bitmap.
The method to do would like this (assuming the footer width <= image width):
public Bitmap AppendImageFooter(System.Drawing.Image bmp, System.Drawing.Image footer)
{
//Create new image that will be bigger then original image to make place for footer
Bitmap newImage = new Bitmap(bmp.Height+footer.Height,bmp.Width);
//Get graphics from new Image and copy original image and next footer below
Graphics g = Graphics.FromImage(newImage);
g.DrawImage(bmp, new Point(0, 0));
g.DrawImage(footer, new Point(0, bmp.Height));
g.Dispose();
return newImage;
}
And you can fit it in your code at this place:
var footer = Image.FromFile("path_to_your_footer.png");
imageByte= Convert.FromBase64String(ImageUrl);
using (var streamBitmap = new MemoryStream(imageByte))
{
using (var img = Image.FromStream(streamBitmap))
{
var imageWithFooter = AppendImageFooter(img, footer);
imageWithFooter.Save(localPath);
}
}
Edited in reply to additional question from comments:
You can build the footer in runtime. Sample code below, of course you can draw whatever you like in whatever style you like:
public Bitmap AppendImageFooter(System.Drawing.Image bmp, string text)
{
//Create new image that will be bigger then original image to make place for footer
Bitmap newImage = new Bitmap(bmp.Height+200,bmp.Width);
//Get graphics and copy image and below the footer
Graphics g = Graphics.FromImage(bmp);
g.DrawImage(bmp, new Point(0, 0));
g.FillRectangle(new SolidBrush(Color.Black), 0, bmp.Height, bmp.Width, 200);
g.DrawString(text, new Font("Arial", 14), new SolidBrush(Color.White), 20, bmp.Height + 20);
//Anything else you like, circles, rectangles, texts etc..
g.Dispose();
return newImage;
}

Here is the simplest way: I just created new image(footer), a new Image on which old image + footer image is drawn.
int footerHeight = 30;
Bitmap bitmapImg = new Bitmap(img);// Original Image
Bitmap bitmapComment = new Bitmap(img.Width, footerHeight);// Footer
Bitmap bitmapNewImage = new Bitmap(img.Width, img.Height + footerHeight);//New Image
Graphics graphicImage = Graphics.FromImage(bitmapNewImage);
graphicImage.Clear(Color.White);
graphicImage.DrawImage(bitmapImg, new Point(0, 0));
graphicImage.DrawImage(bitmapComment, new Point(bitmapComment.Width, 0));
graphicImage.DrawString("Hi, This is Vivek !", new Font("Arial", 15), new SolidBrush(Color.Black), 0, bitmapImg.Height + footerHeight / 6);
bitmapNewImage.Save(yourImagePath);
bitmapImg.Dispose();
bitmapComment.Dispose();
bitmapNewImage.Dispose();
'img' is the original Image.

C# barcode on image is too thick

I have made a Windows Form application and I want to generate a delivery note with a barcode. I have embed the barcode font, but I get an error. See this question: Embed Barcode in C# PDF Library
Now, I want to make an image from the barcode and embed this image on my delivery note. I have searched on Google for doing this, and I found the following code:
private Image DrawBarcodeAfleverbonImage(String text)
{
Font barcodeFont = new Font("Bar-Code 39", 31, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point);
//Font barcodeFont = new Font("Arial", 31, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point);
//first, create a dummy bitmap just to get a graphics object
Image img = new Bitmap(1, 1);
Graphics drawing = Graphics.FromImage(img);
//measure the string to see how big the image needs to be
SizeF textSize = drawing.MeasureString(text, barcodeFont);
//free up the dummy image and old graphics object
img.Dispose();
drawing.Dispose();
//create a new image of the right size
img = new Bitmap((int)textSize.Width, (int)textSize.Height);
drawing = Graphics.FromImage(img);
//create a brush for the text
Brush textBrush = new SolidBrush(Color.Black);
drawing.DrawString(text, barcodeFont, textBrush, 0, 0);
drawing.Save();
img.Save(#"C:\Users\Marten\Documents\test.png");
textBrush.Dispose();
drawing.Dispose();
return img;
If I run my program an image will be created. There is just one problem: the barcode font is too thick, so I can not scan:
What is wrong?

You need to set a background color before drawing your text:
drawing.Clear(Color.White);
drawing.DrawString(text, barcodeFont, textBrush, 0, 0);
Or if you want a transparent background you need to turn off font smoothing.
drawing.TextRenderingHint = System.Drawing.Text.TextRenderingHint.SingleBitPerPixel;
drawing.DrawString(text, barcodeFont, textBrush, 0, 0);

Generated Bitmap Displays Weirdly in PictureBox

I cannot seem to programmatically create a colored bitmap to display in a PictureBox. The bitmap saves normally as a file, but is faded at the edges when displayed in a PictureBox. Here is simplified code used to create and display the Bitmap (in actual code, the bitmap generation is completely separate from the form, so forcing the bitmap size to match the picturebox size isn't possible):
Bitmap Bmp = new Bitmap(4, 4, System.Drawing.Imaging.PixelFormat.Format24bppRgb);
using (Graphics gfx = Graphics.FromImage(Bmp))
using (SolidBrush brush = new SolidBrush(Color.BlueViolet))
{
gfx.FillRectangle(brush, 0, 0, 4, 4);
}
Then set the Image value on a PictureBox to the generated Bitmap:
pictureBox1.Image = Bmp;
Here is the resulting bitmap displayed in a 300x300 picturebox:
How do I set the Image on the PictureBox so that it displays the colored bitmap properly (full solid)?
EDIT: I am restricted to generating smaller source bitmaps, so upscaling into a PictureBox is unavoidable. The problem appears when the generated source bitmap is 4px or 100px square, so I believe these are relevant cases.
EDIT: The PictureBox scaling should be set to stretch or zoom for the issue to manifest. In this example case the 4x4 source bitmap is stretched to 300x300.
EDIT: The basic problem is PictureBox's inability to upscale small bitmaps into large controls. This is confusing because the Bitmap upscales nicely into a PictureBox.Background image. Unless you have a magic bullet that will fix the image upscaling problem, I think it might be best to go for clear and simple workarounds in your answer.

You are generating a 4x4 bitmap and it's being stretched. Specify the size to match the picture box instead:
int width = pictureBox1.Width;
int height = pictureBox1.Height;
var Bmp = new Bitmap(width, height, System.Drawing.Imaging.PixelFormat.Format24bppRgb);
using (Graphics gfx = Graphics.FromImage(Bmp))
using (var brush = new SolidBrush(Color.BlueViolet))
{
gfx.FillRectangle(brush, 0, 0, width, height);
}
pictureBox1.Image = Bmp;

You will need to turn anti-aliasing off. Also, since you are using one color for the whole picturebox, why not make the bitmap 1x1? If you need it 4x4, change the int the top of the example from 1 to 4.
int hw = 1;
Bitmap Bmp = new Bitmap(hw, hw,
System.Drawing.Imaging.PixelFormat.Format24bppRgb);
using (Graphics gfx = Graphics.FromImage(Bmp))
{
// Turn off anti-aliasing and draw an exact copy
gfx.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.None;
gfx.CompositingMode = System.Drawing.Drawing2D.CompositingMode.SourceCopy;
using (SolidBrush brush = new SolidBrush(Color.BlueViolet))
{
gfx.FillRectangle(brush, 0, 0, hw, hw);
}
}
pictureBox1.Image = Bmp;
UPDATE
Since you are still having the same issue by setting the picturebox to the image, you will have to get the graphics object from the picturebox and draw directly on it.
The code is very similar.
using (Graphics gfx = Graphics.FromImage(pictureBox1.Image))
{
// Turn off anti-aliasing and draw an exact copy
gfx.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.None;
gfx.CompositingMode = System.Drawing.Drawing2D.CompositingMode.SourceCopy;
using (SolidBrush brush = new SolidBrush(Color.BlueViolet))
{
gfx.FillRectangle(brush, 0, 0,
pictureBox11.Width - 1,
pictureBox11.Height - 1);
}
}
// Force the picturebox to redraw with the new image.
// You could also use pictureBox11.Refresh() to do the redraw.
pictureBox11.Invalidate();

I tried to test your code and the image were properly displayed.
But when i used this code:
Rectangle srcRect = New Rectangle(0, 0, Bmp.Width, Bmp.Height);
Rectangle dstRect = New Rectangle(0, 0, PictureBox1.Width, PictureBox1.Height);
g = PictureBox1.CreateGraphics;
g.DrawImage(Bmp, dstRect, srcRect, GraphicsUnit.Pixel);
g.Dispose();
I did get exactly your result. In order to fix it:
Rectangle srcRect = New Rectangle(0, 0, Bmp.Width - 1, Bmp.Height - 1);
Rectangle dstRect = New Rectangle(0, 0, PictureBox1.Width, PictureBox1.Height);
g = PictureBox1.CreateGraphics;
g.DrawImage(Bmp, dstRect, srcRect, GraphicsUnit.Pixel);
g.Dispose();
Edit:
So you have the bitmap and you want to stretch it. And the bitmap has ane solid color. Do this insted:
Color pixelColor = Bmp.GetPixel(0, 0);
PictureBox1.BackColor = pixelColor;
valter

How to Drawing Text with Outline onto Images?

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.