I'm trying to create an image with a transparent background to display on a web page.
I've tried several techniques but the background is always black.
How can I create a transparent image and then draw some lines on it ?
Call Graphics.Clear(Color.Transparent) to, well, clear the image. Don't forget to create it with a pixel format that has an alpha channel, e.g. PixelFormat.Format32bppArgb. Like this:
var image = new Bitmap(135, 135, PixelFormat.Format32bppArgb);
using (var g = Graphics.FromImage(image)) {
g.Clear(Color.Transparent);
g.DrawLine(Pens.Red, 0, 0, 135, 135);
}
Assumes you're using System.Drawing and System.Drawing.Imaging.
Edit: Seems like you don't actually need the Clear(). Just creating the image with an alpha channel creates a blank (fully transparent) image.
This might help(something I threw together which sets the background of a Windows form to a transparent image:
private void TestBackGround()
{
// Create a red and black bitmap to demonstrate transparency.
Bitmap tempBMP = new Bitmap(this.Width, this.Height);
Graphics g = Graphics.FromImage(tempBMP);
g.FillEllipse(new SolidBrush(Color.Red), 0, 0, tempBMP.Width, tempBMP.Width);
g.DrawLine(new Pen(Color.Black), 0, 0, tempBMP.Width, tempBMP.Width);
g.DrawLine(new Pen(Color.Black), tempBMP.Width, 0, 0, tempBMP.Width);
g.Dispose();
// Set the transparancy key attributes,at current it is set to the
// color of the pixel in top left corner(0,0)
ImageAttributes attr = new ImageAttributes();
attr.SetColorKey(tempBMP.GetPixel(0, 0), tempBMP.GetPixel(0, 0));
// Draw the image to your output using the transparancy key attributes
Bitmap outputImage = new Bitmap(this.Width,this.Height);
g = Graphics.FromImage(outputImage);
Rectangle destRect = new Rectangle(0, 0, tempBMP.Width, tempBMP.Height);
g.DrawImage(tempBMP, destRect, 0, 0, tempBMP.Width, tempBMP.Height,GraphicsUnit.Pixel, attr);
g.Dispose();
tempBMP.Dispose();
this.BackgroundImage = outputImage;
}
Related
I have successfully generated a BMP file. (I am still tweaking some changes in format I am required to do though). I created a winform with a PictureBox. Following my last question, I now can save the file, but now the bitmap cannot be displayed in the PictureBox. This happened after I changed the palette following this answer to have the alpha of the colors set to 0
My bmp is monochrome as taught in this answer (I wonder whether there could be a simpler way)
My code is
private void btnNameUsage_Click(object sender, EventArgs e)
{
Bitmap bmp = new Bitmap(width, height);
// Bitmap bmp = new Bitmap(width, height, PixelFormat.Format1bppIndexed); //This does not work
bmp.SetResolution(300.0F, 300.0F);
string name = "Hello how are you";
string date = DateTime.Now.Date.ToString();
using (Graphics thegraphics = Graphics.FromImage(bmp))
{
string complete = date + "\n" + name ;
thegraphics.FillRectangle(Brushes.White, 0, 0, bmp.Width, bmp.Height);
using (Font font1 = new Font("Arial", 24, FontStyle.Regular, GraphicsUnit.Pixel))
using (var sf = new StringFormat()
{
Alignment = StringAlignment.Center,
LineAlignment = StringAlignment.Center,
})
{
thegraphics.DrawString(complete, font1, Brushes.Black, new Rectangle(0, 0, bmp.Width, bmp.Height), sf);
}
}
//add
BitmapData bmpData = bmp.LockBits(new Rectangle(0, 0, bmp.Width, bmp.Height), ImageLockMode.ReadOnly, PixelFormat.Format1bppIndexed);
Bitmap newBitmap = new Bitmap(width, height, bmpData.Stride, PixelFormat.Format1bppIndexed, bmpData.Scan0);
newBitmap.SetResolution(300.0F, 300.0F);
//we modify the palette THIS MAKES THE BMP NOT SHOWN IN PIT BOX
ColorPalette palette = newBitmap.Palette;
palette.Entries[0] = black; //black is a type Color
palette.Entries[1] = white; //white is a type Color
newBitmap.Palette = palette;
picBoxImage.Image = newBitmap; //THIS fails
newBitmap.Save(#"theImage.bmp", ImageFormat.Bmp); //This works!
}
I have to clarify that the generated pallete by default colors are (RGBA) black:000000FF and white: FFFFFFFF (with this palette I can see the bmp in the picbox) but I am changing to black :00000000 and white: FFFFFF00 (as you can see only the A component is changed)
the variables black and white are
Color black = new Color();
Color white = new Color();
white = Color.FromArgb(0, 255, 255, 255); //the 0 is alpha zero
black = Color.FromArgb(0, 0, 0, 0); //the first 0 is alpha zero
I wonder why it is not showing.
As a side question, how can I change the "number of important colors" in the DIB header?
EDIT:
I experimented with the alpha setting (for example 128) and I could see the picture only slightly less bright colors.(as in grey)
This only happens when displaying the bmp. The saved file is correctly black and white
What is the relation between picturebox and alpha...
Alpha denotes the opacity of the color. 0 means the color is totally transparent, i.e. you will only see the canvas/background, 128 means the color is 50% transparent meaning you will see the color and background in the same amount, 255 means full opacity/zero transparency meaning you will only see the color.
In short white is "FFFFFFFF" and black is "FF000000".
If you want to specify colors by their RGB components use the FromArgb method with the three parameters which implicitly sets the alpha channel to 255.
I'm trying to crop and resize an image in PictureBox1. My code:
//original image for eventually undo
undoImage = pictureBox1.BackgroundImage.Clone() as Image;
Bitmap sourceBitmap = new Bitmap(pictureBox1.BackgroundImage, pictureBox1.Width, pictureBox1.Height);
Graphics g = pictureBox2.CreateGraphics();
g.DrawImage(sourceBitmap, new Rectangle(0, 0, pictureBox2.Width, pictureBox2.Height), rectCropArea, GraphicsUnit.Pixel);
sourceBitmap.Dispose();
And it working properly on two PictureBoxes.
But PictureBox2.Image,PictureBox2.BackgroundImage (and any other including ErrorImage...) = null.
I tried PictureBox.DrawToBitmap, and other, like g.GetHdc() found on google, but unsuccessful.
My question:
How do I properly copy the edited image from PictureBox2 to PictureBox1?
Trivial solution:
undoImage = pictureBox1.BackgroundImage.Clone() as Image;
Bitmap sourceBitmap = new Bitmap(pictureBox1.BackgroundImage, pictureBox1.Width, pictureBox1.Height);
using (Graphics g = Graphics.FromImage(sourceBitmap))
{
g.DrawImage(sourceBitmap, new Rectangle(0, 0, pictureBox2.Width,pictureBox2.Height), rectCropArea, GraphicsUnit.Pixel);
}
pictureBox1.BackgroundImage = sourceBitmap;
On a single bitmap I need to display graphs and text values. So what I did is create a bitmap with points and creating a another bitmap with the text and place on the large bitmap.
I tried using the brush to write the text, but I am not able to see the underlying graphics even though trasparency is set.
Instead I thought to set the transparency for the text bitmap, but the bitmap which I have created are 24 bit rgb. So can we set the transparency for the 24 bit map.
Bitmap textBitmap = null;
textBitmap = new Bitmap(10, 10, PixelFormat.Format24bppRgb);
using (Graphics memoryGrahics =
Graphics.FromImage(textBitmap))
{
memoryGrahics.FillRectangle(Brushes.Black, new Rectangle(0, 0, 100, 100));
memoryGrahics.DrawString(result, f, Brushes.White, x, y);
}
//placing the text bitmap on the graphbitmap
using (Graphics g = Graphics.FromImage(GraphBitmap))
{
g.CompositingMode = System.Drawing.Drawing2D.CompositingMode.SourceOver;
textBitmap.MakeTransparent();
g.DrawImage(textBitmap, 0, 0);
return GraphBitmap;
}
well.. it seems like you are using 2 different Graphical objects... although 1 Graphics objects with 1 bitmap can handle multiple layouts of custom drawings, like so:
int width = 800, height = 600;
var bit = new Bitmap(width, height);
var g = Graphics.FromImage(bit);
g.SmoothingMode = SmoothingMode.AntiAlias;
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
var area = new Rectangle(0, 0, width, height);
g.FillRectangle(new LinearGradientBrush(area, Color.PaleGoldenrod, Color.OrangeRed, 45), area);
g.DrawImage(Image.FromFile(#"your image"), new Point(10, 10));
g.DrawString("sample", new System.Drawing.Font("Tahoma", 56), new SolidBrush(Color.Black), new PointF(50, 50));
pictureBox1.Image = bit;
note that g.DrawImage method can be used to load other bitmaps as well
I perform a screen capture and get an image with a text in it. Let consider the text in the image to read - 'Hello'.
Now, I would like to 'create' an image from text 'Hello' which has all the same properties (font style, size, pixel format..) as the text - Hello from my captured image.
I'm using the following code to convert the string - Hello to an image.
string str = "Hello";
Bitmap bmp = new Bitmap(74, 16, PixelFormat.Format32bppArgb);
using (Graphics gfx = Graphics.FromImage((Image)bmp))
{
Font font = new Font("Tahoma", 11, FontStyle.Regular, GraphicsUnit.Pixel);
gfx.FillRectangle(Brushes.Transparent, new RectangleF(0, 0, bmp.Width, bmp.Height));
gfx.FillRectangle(Brushes.Black, 0, 0, 74, 16);
gfx.DrawString(str, font, new SolidBrush(Color.White), 1, 1);
bmp.Save(#"C:\temp\" + str + ".bmp", ImageFormat.Bmp);
}
The two images (one from screen capture, and second from creating) are not the same.
How do I create an image with text which would match exactly to the image with text from the screen capture ?
Here is the code I use to screen capture from the third party application....
Rectangle rect = new Rectangle(194, 41, 74, 16);
using (Bitmap bmpScreenShot = new Bitmap(rect.Width, rect.Height))
{
using (Graphics gfxScreenShot = Graphics.FromImage(bmpScreenShot))
{
gfxScreenShot.CopyFromScreen(rect.Left, rect.Top, 0, 0, bmpScreenShot.Size, CopyPixelOperation.SourceCopy);
gfxScreenShot.Dispose();
MemoryStream imageStream = new MemoryStream();
bmpScreenShot.Save(imageStream, ImageFormat.Bmp);
bmpScreenShot.Save(#"c:\temp\pic1_0.bmp");
}
}
I assume you're trying to implement an OCR. I've never tried anything like it, and can imagine it get's quite complicated. You might want to check out other (open-source) OCRs, like:
OCR in the Cloud, by Microsoft
Tessnet2
I want to plot points over an image that are a bit transparent. As in I'm able to see over what area are they present. Is there any way on C# .net platform to do so.??
Thanks.
This is one way to do it.
Image bitmap = new Bitmap(100, 100); // sample image, load your real image from file here
using (var g = Graphics.FromImage(bitmap))
{
g.FillRectangle(Brushes.Red, new Rectangle(0, 0, bitmap.Width, bitmap.Height)); // Just to fill the background on the sample image, remove this
var transparentColor = Color.FromArgb(127, Color.Blue); // Create a semitransparent color
using(Brush brush = new SolidBrush(transparentColor))
{
// Create the dot
g.FillEllipse(brush, new Rectangle(10, 10, 25, 25));
// Create another dot
g.FillEllipse(brush, new Rectangle(25, 15, 25, 25));
}
}
myPictureBox.Image = bitmap; // display the image in an Imagebox (optional, you might use your image somewhere else)