I'm creating Heatmap depending on the gazed areas of a given image. I can create the heatmap and save it to my desktop as a new file. But I want to create another image, which is made of the heatmap and the image which was gazed to collect the eye tracking data. I want the original picture to be the solid background, and then overlap (or overlay I don't know) the heatmap as transparent, and merge them into one new file. Is there a way to do it in c#?
Thank you
Ok i found an answer,
first I resize my background picture
public static Bitmap ResizeImage(Bitmap image, int width, int height)
{
var destRect = new Rectangle(0, 0, width, height);
var destImage = new Bitmap(width, height);
destImage.SetResolution(image.HorizontalResolution, image.VerticalResolution);
using (var graphics = Graphics.FromImage(destImage))
{
graphics.CompositingMode = CompositingMode.SourceCopy;
graphics.CompositingQuality = CompositingQuality.HighQuality;
graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
graphics.SmoothingMode = SmoothingMode.HighQuality;
graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;
using (var wrapMode = new ImageAttributes())
{
wrapMode.SetWrapMode(WrapMode.TileFlipXY);
graphics.DrawImage(image, destRect, 0, 0, image.Width, image.Height, GraphicsUnit.Pixel, wrapMode);
}
}
return destImage;
}
after that the heatmap must be set to another opacity level, in order to make background visible
public static 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);
throw ex;
//return null;
}
}
finally we need to merge those two
public static Image Overlap(Image source1, Image source2)
{
var target = new Bitmap(source1.Width, source1.Height, PixelFormat.Format32bppArgb);
var graphics = Graphics.FromImage(target);
graphics.CompositingMode = CompositingMode.SourceOver; // this is the default, but just to be clear
graphics.DrawImage(source1, 0, 0);
graphics.DrawImage(source2, 0, 0);
return target;
}
here is my background:
original RTE
and here is the merged version, with the heatmap of the eyetracking data
RTE + heatmap
Related
I am trying to print 40x40mm labels from a programmatically created image.
The label must have text on it, and a logo. Since the label is fairly small I am finding myself fiddling with how to do proper smooting, antialias and such.
I have tried multipl settings but I am not sure it's even the right way to go about it.
First I draw the container Bitmap:
private Bitmap DrawLabelCircle()
{
var labelImage = new Bitmap(152, 152);
using (Graphics gfx = Graphics.FromImage(labelImage))
{
var pen = new Pen(Color.Black, 1);
gfx.SmoothingMode = SmoothingMode.AntiAlias;
gfx.DrawEllipse(pen, 1, 1, 150, 150);
}
return labelImage;
}
Then I overlay different text snippets on that container Bitmap
private Bitmap DrawDistributorTextRectangle(string text)
{
var bitmap = new Bitmap(113, 113);
var rectangle = new Rectangle(0, 0, 110, 110);
using (Graphics gfx = Graphics.FromImage(bitmap))
{
gfx.SmoothingMode = SmoothingMode.AntiAlias;
gfx.InterpolationMode = InterpolationMode.HighQualityBicubic;
gfx.PixelOffsetMode = PixelOffsetMode.HighQuality;
var font = new Font(FontFamily.GenericSansSerif, 5, FontStyle.Regular, GraphicsUnit.Point);
var brush = new SolidBrush(Color.Black);
gfx.TextRenderingHint = TextRenderingHint.AntiAlias;
gfx.DrawString(text, font, brush, rectangle);
}
bitmap.RotateFlip(RotateFlipType.Rotate270FlipNone);
return bitmap;
}
Overlay that text on the previous created Bitmap.
private Bitmap DistributorTextOverlay(Bitmap source, Bitmap overlay)
{
var result = new Bitmap(source.Width, source.Height);
var graphics = Graphics.FromImage(result);
graphics.CompositingMode = CompositingMode.SourceOver;
graphics.SmoothingMode = SmoothingMode.HighQuality;
graphics.DrawImage(source, 0, 0);
graphics.DrawImage(overlay, 120, 0);
return result;
}
And the I save it.
var imageCodecInfo = ImageCodecInfo.GetImageEncoders().First(encoder => encoder.MimeType == "image/png");
var encoderInfo = new EncoderParameters() { Param = { [0] = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 100L) } };
image.SetResolution(203, 203);
image.Save("img.png", imageCodecInfo, encoderInfo);
The big challenge here is that the image I get is actually looking alright, all things considered.
But when I print it, it looks terrible pixelated.
I would really like to give some pointers for what settings I should apply to all these bitmaps before saving the final result, and what settings should apply for the final image I save.
I am by no means a .NET graphics expert so all help is much appreciated.
40mm is 1.5748 inches. So if you plan to print it at 300 dpi resolution, your bitmap should be 1.5748*300 = 472 pixels instead of 152.
I have a PNG image of resolution 6000x4000, on which I have to draw upon. So I load the image into a pictureBox with of size 1280x800. After drawing on it, I need to save the PNG image in its original resolution of 6000x4000. So I reload it into a new bitmap of size 6000x4000 using
btm = new Bitmap(6000, 4000);
image = Graphics.FromImage(btm);
g.DrawImage(btm, Point.Empty);
And save it using
btm.Save(filePath, System.Drawing.Imaging.ImageFormat.Png);
Now I end up with the a white background png image of resolution 6000x4000 but with the edited image of 1280x800 on it like this Saved Image
How do I resize the image back to its original (6000x4000) size. Thank you.
Also please find my codebelow
private void drawImage(string imgLocation)
{
Bitmap b = new Bitmap(imgLocation);
////test
pictureBox1.Height = 800;
pictureBox1.Width = 1280;
g = pictureBox1.CreateGraphics();
btm = new Bitmap(6000, 4000);
image = Graphics.FromImage(btm);
image.CompositingMode = CompositingMode.SourceCopy;
image.CompositingQuality = CompositingQuality.HighQuality;
image.InterpolationMode = InterpolationMode.HighQualityBicubic;
image.SmoothingMode = SmoothingMode.HighQuality;
image.PixelOffsetMode = PixelOffsetMode.HighQuality;
image.Clear(Color.White);
image.DrawImage(b, new Rectangle(0, 0, pictureBox1.Width, pictureBox1.Height));
//image.DrawImage(btm, new Rectangle(0, 0, pictureBox1.Width, pictureBox1.Height));
g.SmoothingMode = SmoothingMode.HighQuality;
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
g.PixelOffsetMode = PixelOffsetMode.HighQuality;
//g.DrawImage(btm, Point.Empty);
g.DrawImage(btm, new Rectangle(0, 0, 6000,4000) );
}
What about this? g.DrawImage(btm, new Rectangle(0,0,6000,4000));
Below is a method that may help you with images upscaling/downscaling.
Note though that big upscaling ratio will cause serious image distortions in any case.
You may also try to play with other then graphics.CompositingMode properties like graphics.CompositingQuality
You will need following usings:
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
The method works fine in my app.
public static Image ImageResize(Image img, int width, int height)
{
var tgtRect = new Rectangle(0, 0, width, height);
var tgtImg = new Bitmap(width, height);
tgtImg.SetResolution(img.HorizontalResolution, img.VerticalResolution);
using (var graphics = Graphics.FromImage(tgtImg))
{
graphics.CompositingMode = CompositingMode.SourceCopy;
using (var wrapMode = new ImageAttributes())
{
wrapMode.SetWrapMode(WrapMode.TileFlipXY);
graphics.DrawImage(img, tgtRect, 0, 0, img.Width, img.Height, GraphicsUnit.Pixel, wrapMode);
}
return tgtImg;
}
}
Sorry for my English. I'm trying to crop an image after dragging. It works but my problem is, black bold borders appears on cropped image. I don't know how to solve it.
Here is my code:
using (Bitmap sourceBitmap = new Bitmap(fullSizeImage))
{
Rectangle cropRect = new Rectangle(0, 0, sourceWidth, sourceHeight);
using (Bitmap newBitMap = new Bitmap(cropRect.Width, cropRect.Height))
{
using (Graphics g = Graphics.FromImage(newBitMap))
{
g.SmoothingMode = SmoothingMode.HighQuality;
g.PixelOffsetMode = PixelOffsetMode.HighQuality;
g.CompositingQuality = CompositingQuality.HighQuality;
g.CompositingMode = CompositingMode.SourceCopy;
g.DrawImage(sourceBitmap, new Rectangle(0, pp, sourceWidth, sourceHeight), cropRect, GraphicsUnit.Pixel);
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
ImageCodecInfo codec = ImageCodecInfo.GetImageEncoders()[4];
EncoderParameters parameters = new EncoderParameters(1);
parameters.Param[0] = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 100L);
newBitMap.Save(filePath);
}
}
}
And here is cropped image:
Your destination image is the same physical size, because you use the same physical dimensions to create it:
Rectangle cropRect = new Rectangle(0, 0, sourceWidth, sourceHeight);
When you draw the original image into this new bitmap, you draw it with an offset pp, but still with the same height and width (so you're only cropping the bottom and right). This offset "colours" the memory of the new bitmap only from that y-coordinate downwards, and hence you have the black border.
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
I have a c#-class that looks roughly like this:
class ImageContainer
{
Image image;
internal ImageContainer getResized(int width, int height)
{
Bitmap bmp = new Bitmap(width, height);
//Create a System.Drawing.Graphics object from the Bitmap which we will use to draw the high quality scaled image
System.Drawing.Graphics gr = System.Drawing.Graphics.FromImage(bmp);
//Set the System.Drawing.Graphics object property SmoothingMode to HighQuality
gr.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
//Set the System.Drawing.Graphics object property CompositingQuality to HighQuality
gr.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
//Set the System.Drawing.Graphics object property InterpolationMode to High
gr.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
//Draw the original image into the target Graphics object scaling to the desired width and height
System.Drawing.Rectangle rectDestination = new System.Drawing.Rectangle(0, 0, width, height);
gr.DrawImage(image, rectDestination, 0, 0, image.Width, image.Height, GraphicsUnit.Pixel);
//dispose / release resources
ImageContainer ic = new ImageContainer();
ic.image = bmp;
return ic;
}
}
The resizing works fine, but DrawImage doesn't draw the most right an lower pixel-fragments when scaling down an image.
the problem is solved by
gr.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality;
:)