I need to load an image with green circle over a transparent background into a bitmap image using c# (System.Drawings).
That's the easy part. However I need to change the color of the circle before adding it to the bigger image, without affecting the transparency of the surrounding. In my case I need to change the circle color to yellow and add it as a sun.
I can't use fixed yellow circle image because the desired color is dynamic.
So in the code below, how can I change the color of the image before adding it to the bitmap?
Image i = Image.FromFile(greenCircleFile);
Bitmap b = new Bitmap(500, 500);
using(Graphics g = Graphics.FromImage(b))
{
//--> Here I need to change the color of the green circle to yellow
//afterwards I can add it to the bitmap image
g.DrawImage(i, 0, 0, 500, 500);
}
Please note that two things need to be into consideration: Keeping the anti-aliasing of the shape (circle), and the color needs to be picked by user and used as is to overlay the original color of the circle.
Fixed:
Thanks to #TaW, he provided the correct answer. However with a glitch, here's the final version that worked for me:
Image i = Image.FromFile(greenCircleFile);
Bitmap b = new Bitmap(500, 500);
using(Graphics g = Graphics.FromImage(b))
{
//Here I need to change the color of the green circle to yellow
i = ChangeToColor(b, Color.Gold)
//afterwards I can add it to the bitmap image
g.DrawImage(i, 0, 0, 500, 500);
}
While ChangeToColor function is as follows:
Bitmap ChangeToColor(Bitmap bmp, Color c)
{
Bitmap bmp2 = new Bitmap(bmp.Width, bmp.Height);
using (Graphics g = Graphics.FromImage(bmp2))
{
float tr = c.R / 255f;
float tg = c.G / 255f;
float tb = c.B / 255f;
ColorMatrix colorMatrix = new ColorMatrix(new float[][]
{
new float[] {0, 0, 0, 0, 0},
new float[] {0, 0, 0, 0, 0},
new float[] {0, 0, 0, 0, 0},
new float[] {0, 0, 0, 1, 0},
new float[] {tr, tg, tb, 0, 1}
});
ImageAttributes attributes = new ImageAttributes();
attributes.SetColorMatrix(colorMatrix);
g.DrawImage(bmp, new Rectangle(0, 0, bmp.Width, bmp.Height),
0, 0, bmp.Width, bmp.Height, GraphicsUnit.Pixel, attributes);
}
return bmp2;
}
This will create a new Bitmap with all non-transparent pixels moved strongly toward a new color:
Bitmap ChangeToColor(Bitmap bmp, Color c)
{
Bitmap bmp2 = new Bitmap(bmp.Width, bmp.Height);
using (Graphics g = Graphics.FromImage(bmp2))
{
float tr = c.R / 255f;
float tg = c.G / 255f;
float tb = c.B / 255f;
ColorMatrix colorMatrix = new ColorMatrix(new float[][]
{
new float[] {0, 0, 0, 0, 0},
new float[] {0, 0, 0, 0, 0},
new float[] {0, 0, 0, 0, 0},
new float[] {0, 0, 0, 1, 0},
new float[] {tr, tg, tb, 0, 1} // kudos to OP!
});
ImageAttributes attributes = new ImageAttributes();
attributes.SetColorMatrix(colorMatrix);
g.DrawImage(bmp, new Rectangle(0, 0, bmp.Width, bmp.Height),
0, 0, bmp.Width, bmp.Height, GraphicsUnit.Pixel, attributes);
}
return bmp2;
}
do make sure not to leak the Bitmaps you create!
Note that there are other methods as well. Here is a link to a method that uses ColorMapping. This allows for a range of colors to be replaced by another range, so it can keep gradients like the ones you get in anti-alised graphics..
Here's my solution you just need to create a new Control
then inherit the Picturebox check this out.
public partial class UICirclePicture : PictureBox
{
[Browsable(false)]
public int Depth { get; set; }
[Browsable(false)]
public SprikiwikiUI Ui
{
get { return SprikiwikiUI.Instance; }
}
[Browsable(false)]
public MouseState MouseState { get; set; }
public UICirclePicture()
{
BackColor = Ui.GetApplicationBackgroundColor();
SizeMode = PictureBoxSizeMode.StretchImage;
}
protected override void OnResize(EventArgs e)
{
base.OnResize(e);
using (var gp = new GraphicsPath())
{
gp.AddEllipse(new Rectangle(0, 0, this.Width - 1, this.Height - 1));
this.Region = new Region(gp);
}
}
}
Related
What am I trying to do?
The following function should simply return the image defined by parameter "sourceImage" with changed "opacity":
public static Image DisableImage(Image sourceImage)
{
Image newImage = new Bitmap(sourceImage);
using (Graphics g = Graphics.FromImage(newImage))
{
using (ImageAttributes imageAttributes = new ImageAttributes())
{
ColorMatrix colorMatrix = new ColorMatrix();
colorMatrix.Matrix33 = 0.5f;
imageAttributes.SetColorMatrix(colorMatrix);
//Draw the original image on the new image using the color matrix
g.DrawImage(sourceImage, new Rectangle(0, 0, sourceImage.Width, sourceImage.Height), 0, 0, sourceImage.Width, sourceImage.Height, GraphicsUnit.Pixel, imageAttributes);
}
}
return newImage;
}
What is the problem?
The returned image seems to be not changed at all.
What have I tried?
If changing the following line
ColorMatrix colorMatrix = new ColorMatrix();
to
ColorMatrix colorMatrix = new ColorMatrix(
new float[][]{
new float[] {0, 0, 0, 0, 0},
new float[] {0, 0, 0, 0, 0},
new float[] {0, 0, 0, 0, 0},
new float[] {0, 0, 0, 1, 0},
new float[] {Color.Red.R / 255.0f,
Color.Red.G / 255.0f,
Color.Red.B / 255.0f,
0, 1}
});
a red half-transparent "film" is drawn on the image, which makes me suspect that I missed something in how to use the ColorMatrix.
Any help is appreciated, thanks!
Alright, I figured it out myself.
Changing this line:
Image newImage = new Bitmap(sourceImage);
to
Image newImage = new Bitmap(sourceImage.Width, sourceImage.Height);
was the solution.
I was probably drawing on top of the existing image, which was of course not what I wanted.
Any possibility to delete this question?
Here is my code:
public static void ReduceScreenshot(string fileName)
{
var bmpSS = new Bitmap(Screen.PrimaryScreen.Bounds.Width, Screen.PrimaryScreen.Bounds.Height);
var gfxSS = Graphics.FromImage(bmpSS);
gfxSS.CopyFromScreen(Screen.PrimaryScreen.Bounds.X, Screen.PrimaryScreen.Bounds.Y, 0, 0, Screen.PrimaryScreen.Bounds.Size, CopyPixelOperation.SourceCopy);
ColorMatrix colorMatrix = new ColorMatrix(
new float[][]
{
new float[] { 1.5f, 1.5f, 1.5f, 0, 0},
new float[] { 1.5f,1.5f, 1.5f, 0, 0},
new float[] {1.5f, 1.5f, 1.5f, 0, 0},
new float[] {0, 0, 0, 1, 0},
new float[] {-1, -1, -1, 0, 1}
});
ImageAttributes attributes = new ImageAttributes();
attributes.SetColorMatrix(colorMatrix);
Rectangle abc= new Rectangle(-783, -383, bmpSS.Width, bmpSS.Height);
gfxSS.DrawImage(bmpSS, abc, -783, -383, bmpSS.Width, bmpSS.Height, GraphicsUnit.Pixel, attributes);
bmpSS.Save("ScreenshotGray.png", ImageFormat.Png);
}
}
It's how it work http://take.ms/6tzvU. How should i change area from rectangle to triangle?
Not sure just which points shall set up the triangle but the code to restrict DrawImage to it should look something like this:
using System.Drawing.Imaging;
..
..
Rectangle abc = new Rectangle(-783, -383, bmpSS.Width, bmpSS.Height);
GraphicsPath gp = new GraphicsPath();
// three points to make up a triangle
// repeat the first one as one way of closing the path
// use your own coordinates!
Point[] p = new Point[] { new Point(12, 34), new Point(56, 78),
new Point(90, 12), new Point(12, 34) };
gp.AddLines(p); // or AddPolygon
gfxSS.SetClip(gp); // now restrict the Graphics object to the interior of the path
gfxSS.DrawImage(bmpSS, abc, -783, -383, bmpSS.Width, bmpSS.Height,
GraphicsUnit.Pixel, attributes);
So basically I've got 2 effects. 1 is Sepia and the other is some Aqua effect, when I put the Aqua effect onto the image and then go to put the Sepia effect onto it the Sepia effect will overlay the Aqua. I don't understand why it is doing it, I know to add an additional picture box to it and make the picturebox invisible but this isn't an efficient way of doing it, their must be another more efficient way of doing it, can anyone please share?
Sepia
private void btnGrayscale_Click(object sender, EventArgs e)
{
Bitmap grayScale = (Bitmap)picOriginal.Image.Clone();
int height = grayScale.Size.Height;
int width = grayScale.Size.Width;
for (int yCoordinate = 0; yCoordinate < height; yCoordinate++)
{
for (int xCoordinate = 0; xCoordinate < width; xCoordinate++)
{
Color color = grayScale.GetPixel(xCoordinate, yCoordinate);
int grayColor = (color.R + color.G + color.B) / 3;
grayScale.SetPixel(xCoordinate, yCoordinate, Color.FromArgb(grayColor,grayColor,grayColor));
}
}
picModified.Image = grayScale;
}
Aqua
ColorMatrix matrix = new ColorMatrix(new float[][]{
new float[] {0, 4, 0, 0, 0},
new float[] {0, 0, 4, 0, 4},
new float[] {0, 0, 0, 4, 0},
new float[] { 0, 0, 4, 0, 1},
new float[] { 0, 0, 0, 4, 0}
});
Image image = (Bitmap)picOriginal.Image.Clone();
ImageAttributes attributes = new ImageAttributes();
attributes.SetColorMatrix(matrix);
Graphics graphics = Graphics.FromImage(image);
graphics.DrawImage(image,
new Rectangle(0, 0, image.Width, image.Height),0,0,image.Width,image.Height,
GraphicsUnit.Pixel,attributes);
graphics.Dispose();
picModified.Image = image;
}
What I'm trying to do is paint a solid color and/or pattern with some degree of opacity over an existing image. I believe from what I've read this will involve a bitmap mask. The examples I've seen using bitmap masks as opacity masks only show them used against images to crop them a certain way, and I want to use it for painting. Here is basically what I'm trying to accomplish:
The first image is being loaded and drawn onto a derived Canvas class using DrawImage. I'm trying to accomplish what you see in the 3rd image, the 2nd is an example of a mask I might use. The two key points being that the blue surface in the 3rd image needs to be any arbitrary color, and it needs some opacity so that you can still see the shading on the underlying image. This is kind of a simple example, some of the other objects have much more surface detail and much more complicated masks.
A color matrix can be useful here:
private Image tooth = Image.FromFile(#"c:\...\tooth.png");
private Image maskBMP = Image.FromFile(#"c:\...\toothMask.png");
protected override void OnPaint(PaintEventArgs e) {
base.OnPaint(e);
e.Graphics.DrawImage(tooth, Point.Empty);
using (Bitmap bmp = new Bitmap(maskBMP.Width, maskBMP.Height,
PixelFormat.Format32bppPArgb)) {
// Transfer the mask
using (Graphics g = Graphics.FromImage(bmp)) {
g.DrawImage(maskBMP, Point.Empty);
}
Color color = Color.SteelBlue;
ColorMatrix matrix = new ColorMatrix(
new float[][] {
new float[] { 0, 0, 0, 0, 0},
new float[] { 0, 0, 0, 0, 0},
new float[] { 0, 0, 0, 0, 0},
new float[] { 0, 0, 0, 0.5f, 0},
new float[] { color.R / 255.0f,
color.G / 255.0f,
color.B / 255.0f,
0, 1}
});
ImageAttributes imageAttr = new ImageAttributes();
imageAttr.SetColorMatrix(matrix);
e.Graphics.DrawImage(bmp,
new Rectangle(Point.Empty, bmp.Size),
0,
0,
bmp.Width,
bmp.Height,
GraphicsUnit.Pixel, imageAttr);
}
}
The 0.5f value in the Matrix declaration is the alpha value.
I want my webBrowser to look transparent. My code looks like that:
Bitmap backGroungImage = new Bitmap(Width, Height);
myWebBrowser1.Visible = false;
DrawToBitmap(backGroungImage, new Rectangle(0, 0, backGroungImage.Width, backGroungImage.Height));
myWebBrowser1.Visible = true;
Bitmap backGroundImage2 = new Bitmap(myWebBrowser1.Width - 20, myWebBrowser1.Height - 20);
Graphics.FromImage(backGroundImage2).DrawImage(backGroungImage, new Rectangle(0, 0, backGroundImage2.Width, backGroundImage2.Height), new Rectangle(SystemInformation.FrameBorderSize.Width + myWebBrowser1.Location.X + 10, SystemInformation.CaptionHeight + SystemInformation.FrameBorderSize.Height + 10 + myWebBrowser1.Location.Y, myWebBrowser1.Width - 20, myWebBrowser1.Height - 20), GraphicsUnit.Pixel);
ImageAttributes imageAttributes = new ImageAttributes();
ColorMatrix colorMatrix = new ColorMatrix(new float[][]
{
new float[] {1, 0, 0, 0, 0},
new float[] {0, 1, 0, 0, 0},
new float[] {0, 0, 1, 0, 0},
new float[] {0, 0, 0, 1f - 230f/255f, 0},
new float[] {0, 0, 0, 0, 1}
});
imageAttributes.SetColorMatrix(colorMatrix, ColorMatrixFlag.Default, ColorAdjustType.Bitmap);
Bitmap backGroundImage3 = new Bitmap(backGroundImage2.Width, backGroundImage2.Height);
Graphics.FromImage(backGroundImage3).DrawImage(backGroundImage2, new Rectangle(0, 0, backGroundImage3.Width, backGroundImage3.Height), 0, 0, backGroundImage2.Width, backGroundImage2.Height, GraphicsUnit.Pixel, imageAttributes);
backGroundImage3.Save("d:\\BG.png", ImageFormat.Png);
and then I use "d:\BG.png" in html code.
It works fine on my windows 7, but on windows XP it's darker, doesn't fit other white elements drawn in GDI+ with alpha = 230 (I mean round frame around the WebBrowser control).
Before, when I didn't use ColorMatrix, I did that:
int alpha = 230;
Color c1, color = Color.FromArgb(255, 255, 255);
for (int x = 0; x < d.Width; x++)
for (int y = 0; y < d.Height; y++)
{
c1 = d.GetPixel(x, y);
d.SetPixel(x, y, Color.FromArgb(((255 - alpha) * c1.R + alpha * color.R) / 255, ((255 - alpha) * c1.G + alpha * color.G) / 255, ((255 - alpha) * c1.B + alpha * color.B) / 255));
}
And looked great on both OSes, but was very slow.
I want it to look the same as white color with alpha 230 in GDI+ and to be fast.
BTW. is there a way to put in WebBrowser a background image and then make it transparent?
PS. it's Visual Studio 2010 Professional and .NET Framework 4 installed from the same file on both computers.
I updated my IE browser to version 8, and works perfect.