Develop Reference

How to copy a bitmap to an image with transparency based on alpha [duplicate]

I have a form which has a image. I am using a slider to change the opacity of the image. So in the "ValueChanged" event of the slider I am calling the following method to change the opacity.
//Setting the opacity of the image
public static Image SetImgOpacity(Image imgPic, float imgOpac)
{
Bitmap bmpPic = new Bitmap(imgPic.Width, imgPic.Height);
Graphics gfxPic = Graphics.FromImage(bmpPic);
ColorMatrix cmxPic = new ColorMatrix();
cmxPic.Matrix33 = imgOpac;
ImageAttributes iaPic = new ImageAttributes();
iaPic.SetColorMatrix(cmxPic, ColorMatrixFlag.Default, ColorAdjustType.Bitmap);
gfxPic.DrawImage(imgPic, new Rectangle(0, 0, bmpPic.Width, bmpPic.Height), 0, 0, imgPic.Width, imgPic.Height, GraphicsUnit.Pixel, iaPic);
gfxPic.Dispose();
return bmpPic;
}
The returned Image is set to the original image.
My problem is that the opacity of the image is not changing... If there is any error please be kind enough to point out.. Thnx...

Try this one from CodeProject - Change Opacity of Image in C#:
/// <summary>
/// method for changing the opacity of an image
/// </summary>
/// <param name="image">image to set opacity on</param>
/// <param name="opacity">percentage of opacity</param>
/// <returns></returns>
public Image SetImageOpacity(Image image, float opacity)
{
try
{
//create a Bitmap the size of the image provided
Bitmap bmp = new Bitmap(image.Width, image.Height);
//create a graphics object from the image
using (Graphics gfx = Graphics.FromImage(bmp)) {
//create a color matrix object
ColorMatrix matrix = new ColorMatrix();
//set the opacity
matrix.Matrix33 = opacity;
//create image attributes
ImageAttributes attributes = new ImageAttributes();
//set the color(opacity) of the image
attributes.SetColorMatrix(matrix, ColorMatrixFlag.Default, ColorAdjustType.Bitmap);
//now draw the image
gfx.DrawImage(image, new Rectangle(0, 0, bmp.Width, bmp.Height), 0, 0, image.Width, image.Height, GraphicsUnit.Pixel, attributes);
}
return bmp;
}
catch (Exception ex)
{
MessageBox.Show(ex.Message);
return null;
}
}

You loop over the pixels and play only the alpha channel.
If you do this with Bitmap.LockBits it will actually be very fast.
private const int bytesPerPixel = 4;
/// <summary>
/// Change the opacity of an image
/// </summary>
/// <param name="originalImage">The original image</param>
/// <param name="opacity">Opacity, where 1.0 is no opacity, 0.0 is full transparency</param>
/// <returns>The changed image</returns>
public static Image ChangeImageOpacity(Image originalImage, double opacity)
{
if ((originalImage.PixelFormat & PixelFormat.Indexed) == PixelFormat.Indexed)
{
// Cannot modify an image with indexed colors
return originalImage;
}
Bitmap bmp = (Bitmap)originalImage.Clone();
// Specify a pixel format.
PixelFormat pxf = PixelFormat.Format32bppArgb;
// Lock the bitmap's bits.
Rectangle rect = new Rectangle(0, 0, bmp.Width, bmp.Height);
BitmapData bmpData = bmp.LockBits(rect, ImageLockMode.ReadWrite, pxf);
// Get the address of the first line.
IntPtr ptr = bmpData.Scan0;
// Declare an array to hold the bytes of the bitmap.
// This code is specific to a bitmap with 32 bits per pixels
// (32 bits = 4 bytes, 3 for RGB and 1 byte for alpha).
int numBytes = bmp.Width * bmp.Height * bytesPerPixel;
byte[] argbValues = new byte[numBytes];
// Copy the ARGB values into the array.
System.Runtime.InteropServices.Marshal.Copy(ptr, argbValues, 0, numBytes);
// Manipulate the bitmap, such as changing the
// RGB values for all pixels in the the bitmap.
for (int counter = 0; counter < argbValues.Length; counter += bytesPerPixel)
{
// argbValues is in format BGRA (Blue, Green, Red, Alpha)
// If 100% transparent, skip pixel
if (argbValues[counter + bytesPerPixel - 1] == 0)
continue;
int pos = 0;
pos++; // B value
pos++; // G value
pos++; // R value
argbValues[counter + pos] = (byte) (argbValues[counter + pos] * opacity);
}
// Copy the ARGB values back to the bitmap
System.Runtime.InteropServices.Marshal.Copy(argbValues, 0, ptr, numBytes);
// Unlock the bits.
bmp.UnlockBits(bmpData);
return bmp;
}

I am not familiar with the ImageAttributes approach, but you should be able to simply run through all the pixels of the image and modify the alpha component of the color of the pixel.

The ImageAttributes method will work fine with PNG as the original post has it listed, but for JPEG you need to flood fill the graphics canvas with a color first. Since this can leave a tiny undesired border, only do it if the opacity is something less than 1.0:
if(opacity < 1.0)
{
// g is a Graphics object
g.Clear(Color.White);
}
// set color matrix and draw image as shown in other posts
// ...

How to pass the value in image cell in iTextSharp?

Based on below Part of code, May i know how to passing the picturebox image in image cell iTextSharp in C# ? kindly advise. thank you
Image<Bgr, Byte> img1 = new Image<Bgr, Byte>(Application.StartupPath + "/TrainedFaces/" + reader.GetString(11) + ".bmp");
Application.Idle -= new EventHandler(ProcessFrame);
pictureBox1.Image = img1;
Shall I use string format ?
cell = ImageCell(string.Format("+ img1 +"), 25f, PdfPCell.ALIGN_CENTER);

ImageCell takes byte[] data, it won't take string.
Here is the entire implementation,
// Code resides in your page codebehind, do not confuse with AppLevel, it's just my static class
System.Drawing.Image imgResized = AppLevel.Resize(AppLevel.byteArrayToImage(File.ReadAllBytes(Server.MapPath("~/images/companylogo.jpg"))), 194, 138, RotateFlipType.RotateNoneFlipNone);
cell = AppLevel.ImageCell(AppLevel.imageToByteArray(imgResized), 30f, PdfPCell.ALIGN_RIGHT);
table.AddCell(cell);
///Helper methods///
/// <summary>
/// Resizes and rotates an image, keeping the original aspect ratio. Does not dispose the original
/// Image instance.
/// </summary>
/// <param name="image">Image instance</param>
/// <param name="width">desired width</param>
/// <param name="height">desired height</param>
/// <param name="rotateFlipType">desired RotateFlipType</param>
/// <returns>new resized/rotated Image instance</returns>
public static System.Drawing.Image Resize(System.Drawing.Image image, int width, int height, RotateFlipType rotateFlipType)
{
// clone the Image instance, since we don't want to resize the original Image instance
var rotatedImage = image.Clone() as System.Drawing.Image;
rotatedImage.RotateFlip(rotateFlipType);
var newSize = CalculateResizedDimensions(rotatedImage, width, height);
var resizedImage = new Bitmap(newSize.Width, newSize.Height, PixelFormat.Format32bppArgb);
resizedImage.SetResolution(72, 72);
using (var graphics = Graphics.FromImage(resizedImage))
{
// set parameters to create a high-quality thumbnail
graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
graphics.SmoothingMode = SmoothingMode.AntiAlias;
graphics.CompositingQuality = CompositingQuality.HighQuality;
graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;
// use an image attribute in order to remove the black/gray border around image after resize
// (most obvious on white images), see this post for more information:
// http://www.codeproject.com/KB/GDI-plus/imgresizoutperfgdiplus.aspx
using (var attribute = new ImageAttributes())
{
attribute.SetWrapMode(WrapMode.TileFlipXY);
// draws the resized image to the bitmap
graphics.DrawImage(rotatedImage, new System.Drawing.Rectangle(new Point(0, 0), newSize), 0, 0, rotatedImage.Width, rotatedImage.Height, GraphicsUnit.Pixel, attribute);
}
}
return resizedImage;
}
public static System.Drawing.Image byteArrayToImage(byte[] byteArrayIn)
{
MemoryStream ms = new MemoryStream(byteArrayIn);
System.Drawing.Image returnImage = System.Drawing.Image.FromStream(ms);
eturnImage;
}

Possible to have anti-aliasing when drawing a clipped image?

Currently, I'm successfully using the Graphics class to draw a non-rectangular clipped image (the turtle inside):
My code looks something like:
using (var g = Graphics.FromImage(image))
{
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
using (var gfxPath = new GraphicsPath())
{
gfxPath.AddEllipse(r);
using (var region = new Region(r))
{
region.Exclude(gfxPath);
g.ExcludeClip(region);
g.DrawImage(turtleImage, r, r2, GraphicsUnit.Pixel);
}
}
}
This all works just as expected. What I do not know how to solve is to make the image border anti-aliased.
The image zoomed looks like:
I.e. the border where the image ends and the transparent "background" of the image starts is a rough cut, not a smooth alpha blending.
My question is:
Is it possible to clip a drawn image and having anti-aliasing active?

If you want to go for full blown feathering you should consider taking a look at this article:
http://danbystrom.se/2008/08/24/soft-edged-images-in-gdi/
If you want a quick and easy solution you could probably draw the image first then draw a GraphicsPath on top of it using a solid white brush with antialiasing. You would do something like this:
Rectangle outerRect = ClientRectangle;
Rectangle rect = Rectangle.Inflate(outerRect, -20, -20);
using (Image img = new Bitmap("test.jpg"))
{
g.DrawImage(img, outerRect);
using (SolidBrush brush = new SolidBrush(Color.White))
using (GraphicsPath path = new GraphicsPath())
{
g.SmoothingMode = SmoothingMode.AntiAlias;
path.AddEllipse(rect);
path.AddRectangle(outerRect);
g.FillPath(brush, path);
}
}

The other answers here won't work if you want a transparent background because you cannot draw with a transparent brush - it doesn't do anything.
I found other answers that can do it (for example, using SetClip), but it doesn't come out with an anti-aliased edge.
I found this answer that works, but that one is designed to just round the corners, not make it a circle. So I modified it.
Here's how you can crop an image to a circle with a transparent background and anti-aliased edges:
/// <summary>
/// Crop the given image into a circle (or ellipse, if the image isn't square)
/// </summary>
/// <param name="img">The image to modify</param>
/// <returns>The new, round image</returns>
private static Bitmap CropCircle(Image img) {
var roundedImage = new Bitmap(img.Width, img.Height, img.PixelFormat);
using (var g = Graphics.FromImage(roundedImage))
using (var gp = new GraphicsPath()) {
g.Clear(Color.Transparent);
g.SmoothingMode = SmoothingMode.AntiAlias;
Brush brush = new TextureBrush(img);
gp.AddEllipse(0, 0, img.Width, img.Height);
g.FillPath(brush, gp);
}
return roundedImage;
}
The other answers draw the background color on top of the image. Instead, this creates a new, transparent image first, then draws a cut-out of the image on top.

I'll like to share my solution, which is based on the selected answer.
This code Resize and Crop an image into a Circle applying antialias to the edges. It also Prevents the loss of the image on Mouse Over or Window Resize. Cropped image can easily be saved.
/// <summary>Redimensiona y recorta la imagen en forma de Circulo (con Antialias).</summary>
/// <param name="srcImage">Imagen Original a Recortar</param>
/// <param name="size">Tamaño deseado (en pixeles)</param>
/// <param name="BackColor">Color de fondo</param>
public static Image CropToCircle(System.Drawing.Image srcImage, Size size, System.Drawing.Color BackColor)
{
System.Drawing.Image Canvas = new System.Drawing.Bitmap(size.Width, size.Height, srcImage.PixelFormat);
System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(Canvas);
System.Drawing.Rectangle outerRect = new System.Drawing.Rectangle(-1, -1, Canvas.Width + 1, Canvas.Height + 1);
System.Drawing.Rectangle rect = System.Drawing.Rectangle.Inflate(outerRect, -2, -2);
g.DrawImage(srcImage, outerRect);
using (System.Drawing.SolidBrush brush = new System.Drawing.SolidBrush(BackColor))
using (System.Drawing.Drawing2D.GraphicsPath path = new System.Drawing.Drawing2D.GraphicsPath())
{
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBilinear;
g.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
g.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality;
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
path.AddEllipse(rect);
path.AddRectangle(outerRect);
g.FillPath(brush, path);
}
return Canvas;
}
Usage: (Desired Size is 64x64 pix with White Background)
System.Drawing.Image img = System.Drawing.Image.FromFile(#"E:\Mis Documentos\Mis imágenes\ergo-proxy-fullon-fight.jpg");
System.Drawing.Image circle = Util.CropToCircle(img, new System.Drawing.Size(64,64), System.Drawing.Color.White);
if (circle != null)
{
this.picUser.Image = circle;
}

I had the same issue with constructing a circular profile picture with a transparent background. The tactic I finally settled on was to resize the image to an arbitrary multiple (in my case 5x), do the clipping operation, then shrink it back to the original size while using SmoothingMode.AntiAlias. I get a nicely feathered edge on the picture.
Is it a hack? Yes. Is it performant? Mmm, probably not. Does it work? Perfectly!

How can I create thumbnail from WPF window and convert it into bytes[] so I can persist it?

I would like to create Thumbnail from my wpf window and would like to save it into database and display it later. Is there any good solution?
I have started with RenderTargetBitmap but I can't find any easy way to get it into bytes.
RenderTargetBitmap bmp = new RenderTargetBitmap(180, 180, 96, 96, PixelFormats.Pbgra32);
bmp.Render(myWpfWindow);
Using user32.dll and Graphics.CopyFromScreen() is not good for me and
as it is here because I want to do a screenshot from user controls as well.
Thanks

Steven Robbins has written a great blog post about capturing a screenshot of a control, which contains the following extension method:
public static class Screenshot
{
/// <summary>
/// Gets a JPG "screenshot" of the current UIElement
/// </summary>
/// <param name="source">UIElement to screenshot</param>
/// <param name="scale">Scale to render the screenshot</param>
/// <param name="quality">JPG Quality</param>
/// <returns>Byte array of JPG data</returns>
public static byte[] GetJpgImage(this UIElement source, double scale, int quality)
{
double actualHeight = source.RenderSize.Height;
double actualWidth = source.RenderSize.Width;
double renderHeight = actualHeight * scale;
double renderWidth = actualWidth * scale;
RenderTargetBitmap renderTarget = new RenderTargetBitmap((int) renderWidth, (int) renderHeight, 96, 96, PixelFormats.Pbgra32);
VisualBrush sourceBrush = new VisualBrush(source);
DrawingVisual drawingVisual = new DrawingVisual();
DrawingContext drawingContext = drawingVisual.RenderOpen();
using (drawingContext)
{
drawingContext.PushTransform(new ScaleTransform(scale, scale));
drawingContext.DrawRectangle(sourceBrush, null, new Rect(new Point(0, 0), new Point(actualWidth, actualHeight)));
}
renderTarget.Render(drawingVisual);
JpegBitmapEncoder jpgEncoder = new JpegBitmapEncoder();
jpgEncoder.QualityLevel = quality;
jpgEncoder.Frames.Add(BitmapFrame.Create(renderTarget));
Byte[] _imageArray;
using (MemoryStream outputStream = new MemoryStream())
{
jpgEncoder.Save(outputStream);
_imageArray = outputStream.ToArray();
}
return _imageArray;
}
}
This method takes a control and a scale factor and returns a byte array. So this seems to be a quite good fit with your requirements.
Check out the post for further reading and an example project that is quite neat.

You can use a BitmapEncoder to encode your Bitmap to a PNG, JPG or even BMP file. Check the MSDN documentation on BitmapEncoder.Frames, which has an example that saves to a FileStream. You can save it to any stream.
To get the BitmapFrame from the RenderTargetBitmap, simply create it using the BitmapFrame.Create(BitmapSource) method.

C# Creating thumbnail (low quality and big size problem)

public void CreateThumbnail(Image img1, Photo photo, string targetDirectoryThumbs)
{
int newWidth = 700;
int newHeight = 700;
double ratio = 0;
if (img1.Width > img1.Height)
{
ratio = img1.Width / (double)img1.Height;
newHeight = (int)(newHeight / ratio);
}
else
{
ratio = img1.Height / (double)img1.Width;
newWidth = (int)(newWidth / ratio);
}
Image bmp1 = img1.GetThumbnailImage(newWidth, newHeight, null, IntPtr.Zero);
bmp1.Save(targetDirectoryThumbs + photo.PhotoID + ".jpg");
img1.Dispose();
bmp1.Dispose();
}
I've put 700px so that you can have better insight of the problem.
Here is original image and resized one.
Any good recommendation?
Thanks,
Ile

You should find my answer to this question helpful. It includes a sample for high quality image scaling in C#.
The full sample in my other answer includes how to save the image as a jpeg.
Here's the relevant bit of code...
/// <summary>
/// Resize the image to the specified width and height.
/// </summary>
/// <param name="image">The image to resize.</param>
/// <param name="width">The width to resize to.</param>
/// <param name="height">The height to resize to.</param>
/// <returns>The resized image.</returns>
public static System.Drawing.Bitmap ResizeImage(System.Drawing.Image image, int width, int height)
{
//a holder for the result
Bitmap result = new Bitmap(width, height);
//use a graphics object to draw the resized image into the bitmap
using (Graphics graphics = Graphics.FromImage(result))
{
//set the resize quality modes to high quality
graphics.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
graphics.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
//draw the image into the target bitmap
graphics.DrawImage(image, 0, 0, result.Width, result.Height);
}
//return the resulting bitmap
return result;
}

If the image contains a thumbnail it'll automatically stretch it to the desired size...which will make it look like crap (like your case ;))
Straight outta MSDN...
If the Image contains an embedded
thumbnail image, this method retrieves
the embedded thumbnail and scales it
to the requested size. If the Image
does not contain an embedded thumbnail
image, this method creates a thumbnail
image by scaling the main image.
In your case I just double checked the source image for it's thumbnail and got this...
New Windows Thumbnail : JPEG Format (Offset:830Size:3234)
Thumbnail Type : JPEG
Thumnail Width : 112
Thumbnail Height : 84

Try to draw the original image to another smaller image, and save the result.
Bitmap bmp1 = new Bitmap(newWidth, newHeight);
Graphics g = Graphics.FromImage(bmp);
g.DrawImage(img1, 0, 0, newWidth, newHeight);
bmp1.Save(targetDirectoryThumbs + photo.PhotoID + ".jpg", ImageFormat.Jpeg);

Are you allowed to use third party applications? If so, you may want to check out ImageMagick to manage thumbnail creation. There's a .NET wrapper.
http://imagemagick.codeplex.com/

I wrote a free .dll that does this easily. It's here if you want to see the documentation....
Git Repository & Tutorial