I have a simple WPF application where I display one very large image (9000x2875) and on top of it, many small images (64x64).
To do this, I have a Canvas with one Image, then I programatically add the small images as they arrive.
Now I am trying to save portions of the composite image as png files. I thought I would use a RenderTargetBitmap to render the portion of the Canvas that I wanted. My problem is that I cannot find a good way to save the right portion of the image. Here is a my current hack:
private static void SaveImage(Canvas canvas, string file, int x, int y, int width, int height)
{
//changing 0,0 on the canvas so RenderTargetBitmap works as expected.
canvas.RenderTransform = new MatrixTransform(1d, 0d, 0d, 1d, -x, -y);
canvas.UpdateLayout();
RenderTargetBitmap bmp = new RenderTargetBitmap(width, height, 96d, 96d, Pixelformats.Pbgra32);
bmp.Render(canvas);
PngBitmapEncoder encoder = new PngBitmapEncoder();
encoder.Frames.Add(BitmapFrame.Create(bmp));
using(Stream s = File.Create(file))
{
encoder.Save(s);
}
}
The obvious problem with this is that the display will change due to the RenderTransform. It also makes the application slower. I did try to do a RenderTargetBitmap of the entire canvas, but that was much slower than doing this.
So my questions are:
Is there an easier way to save just a portion of the viewed image?
If not, does someone have a suggestion for a better way to go about this? (I already tried a single WriteableBitmap, but that was about as slow as doing the RenderTargetBitmap of the entire canvas.
What you want to use is a CroppedBitmap, which will allow you to save a cropped portion of your image.
// (BitmapSource bmps)
CroppedBitmap crop = new CroppedBitmap(bmps, new Int32Rect(selRect.X, selRect.Y, selRect.Width, selRect.Height));
Edit: Since there seems to be no way to get this to perform the way you want in WPF I would suggest pre-cropping the large image using GDI+ (without displaying it) and loading the region of it you want onto a smaller canvas.
Related
I want to make very simplistic paint/image editor. Mainly, for pixel editing, but that doesn't seem relevant.
To ease up my effort, I decided to keep the image size at 16x16.
I populate the form, add a PixelBox and slap a default image on it.
Of course, I need to make the pixels visible, set the interpolation to NearestNeighbor.
Then, I stretch the pixelbox to 320x320. And there the situation arises.
The image is displayed as thus:
Cropped image
Could someone shed some light on this? This is just a 16x16 image with a checkerboard pattern that I made, but I can't figure out why it is displayed with that offset at the top left.
Also, no code as been yet added. I assume this is default behavior?
If you look at the examples on the page that exact same error happens, so it must be a bug on the PixelBox.
Instead of using a custom control for this type of operation just use the standard PictureBox and scale the image by yourself:
public Bitmap ScaleBitmap(Bitmap src, Size NewSize)
{
Bitmap bmp = new Bitmap(NewSize.Width, NewSize.Height, src.PixelFormat);
Graphics g = Graphics.FromImage(src);
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.NearestNeighbor;
g.DrawImage(src, new Rectangle(Point.Empty, NewSize), new Rectangle(0, 0, src.Width, src.Height), GraphicsUnit.Pixel);
g.Dispose();
return bmp;
}
I am currently working on a C# application that aims to do some computation and output graphs in a pdf file.
I use the Zedgraph library to draw my graphs so something like graphPane.AddCurve(PointPairList). Now I tried to output these graphs to pdf file via MigraDoc package.
Currently, I have a script that map the Zedgraph to bitmap then paste it on the pdf file. So something like this:
private Bitmap getBitMap()
{
ZedGraphControl graph = new ZedGraphControl();
newGraph = graphPane.Clone();
SizeF s = new SizeF(3.5f, 4.5f);
newGraph.Scale(s);
newGraph.DrawToBitmap(bit, new Rectangle(0, 0, newGraph.Width, newGraph.Height));
return bit;
}
The problem is that this give me a slightly pixellated image on the pdf page. And I need this graph to be in a very high quality. So are there anything I can change the improve the quality or do i have to change my entire approach for such thing.
Thank you so much in advance.
By default a Bitmap you create has your current screen resolution which could be as low as 75dpi, more common 96dpi; more modern monitors have 120dpi or more, but a good print quality starts 150dpi. For really crips images you want 300dpi and to allow zooming you may want to have 600dpi or more..
So you need to create and fill a bitmap with a larger size and take control of its dpi resolution.
Assuming your size of 3.5f x 4.5f is inches, for 300dpi you need a Bitmap with 1050 x 1350 pixels.
So you should create such a Bitmap..:
Bitmap bmp = new Bitmap(1050, 1350);
..and set the resolution:
bmp.SetResolution(300, 300);
To fill it up your control must have the same size:
newGraph.ClientSize = bmp.Size;
Now DrawToBitmap should create an image that is crisp and fit to zoom in..
Note that it does not matter if the control is too large to fit on the screen; DrawToBitmap will still work.
Update In addidtion to a sufficient resolution it is of interest to draw quality lines etc.. A speciality of ZedGraph is that one can turn on Antialiasing, either for individual lines:
curve_x.Line.IsAntiAlias = true;
or other elements:
myPane.XAxis.Scale.FontSpec.IsAntiAlias = true;
or the whole Chart:
zedGraphControl1.IsAntiAlias = true;
All examples are taken from this post.
In my C# program I have a Picturebox in which i want to show a stream of video (consecutive frames). I receive raw data, that I then transform into Bitmap or Image. I can show one image at a time without a problem (to reproduce the video stream).
Now my issue is that I want to merge 2 or more bitmaps (like layers) with the same size and alpha values (ARGB) and show it on the picturebox.
I have read lots of websites and posts here on SO, but many use the Graphics class, and I just can't draw it on my application (very likely because i'm new to C#! and already have my program setup, so I didn't want to change the structure).
What i need (to know):
How to overlay two or more Bitmaps with alpha values;
NO pixel manipulation please, can't afford that cost in performance.
Thank you so much in advance!
NOTE: I think this question shouldn't be marked (or closed) as duplicate, because everything i found in SO is done either with pixel manipulation or through the Graphics class. (but I might be wrong!)
EDIT: Possible workaround (NOT the solution to the question)
In
A PictureBox Problem, the 4th answer (from user comecme) tells me to have 2 picturebox, one on top of the other. The only (extra) thing I had to do to make it work with this approach was:
private void Form1_Load(object sender, EventArgs e)
{
pictureBox2.Parent = pictureBox1;
}
Where pictureBox2 will be the one on top.
I won't consider this an answer to this problem, because I consider it a workaround (specially because having more than 10 pictureboxes doesn't seem ideal! lol). That's why I will leave this question opened waiting for a real answer to my question.
EDIT: Resolved! check my answer.
Here is the real answer to my problem.
1) Use a List<Bitmap> to store all the images you want to blend;
2) Create a new Bitmap to hold the final image;
3) Draw each image on top of the final image's graphics using the using statement.
The code:
List<Bitmap> images = new List<Bitmap>();
Bitmap finalImage = new Bitmap(640, 480);
...
//For each layer, I transform the data into a Bitmap (doesn't matter what kind of
//data, in this question) and add it to the images list
for (int i = 0; i < nLayers; ++i)
{
Bitmap bitmap = new Bitmap(layerBitmapData[i]));
images.Add(bitmap);
}
using (Graphics g = Graphics.FromImage(finalImage))
{
//set background color
g.Clear(Color.Black);
//go through each image and draw it on the final image (Notice the offset; since I want to overlay the images i won't have any offset between the images in the finalImage)
int offset = 0;
foreach (Bitmap image in images)
{
g.DrawImage(image, new Rectangle(offset, 0, image.Width, image.Height));
}
}
//Draw the final image in the pictureBox
this.layersBox.Image = finalImage;
//In my case I clear the List because i run this in a cycle and the number of layers is not fixed
images.Clear();
Credits go to Brandon Cannaday in this tech.pro webpage.
I have two overlapping pictureboxes.The images of both picture boxes have some transparent pixels.I want to see the bottom picture box through the transparent pixels of the overlapping picture box.
I tried setting the background color of both picture boxes as transparent.But it just sets the back color of the picture box to the background color of the form.
Clearly you are using Winforms. Yes, transparency is simulated by drawing the pixels of the Parent. Which is the form, you only see the form pixels, stacking effects don't work. There's a KB article that shows a workaround for this. It is painful. Another approach is to not use PictureBox controls but just draw the images in the form's Paint event.
Consider WPF, it has a very different rendering model that easily supports transparency.
Solutions to that problem might be various, and it mainly depends on your skills and amount of work will depend on kind of images you're dealing with. For example if images are always same resolution, size and overlapping image supports transparency you could try to do manipulation of two Image objects and draw one over another, then display it in PictureBox. Or if you will need to do it multiple times in various places of your app you could even consider creating your own UserContriol.
Code in answer of this question, method ResizeImagein particular, show how to create resized, good quality image, all you need it is to change it a little. Make it to get two Images as input parameters, and change it to draw one image over another.
Changes might look like this
public static Bitmap CombineAndResizeTwoImages(Image image1, Image image2, 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 images into the target bitmap
graphics.DrawImage(image1, 0, 0, result.Width, result.Height);
graphics.DrawImage(image2, 0, 0, result.Width, result.Height);
}
//return the resulting bitmap
return result;
}
And use it, for example, like this:
pictureBox1.Image = CombineAndResizeTwoImages(Image.FromFile("c:\\a.png"), Image.FromFile("c:\\b.png"), 100,100);
But that its only example, and you must tune it up to your needs.
Good luck.
If it's one PictureBox inside another, you can use:
innerPictureBox.SendToBack();
innerPictureBox.Parent = outerPictureBox;
I am looking for a solution\software that I can use in order to render buttons in real time.
That is, I have an image and text, and I want them to be an image altogether in realtime.
Thank you
You can dynamically create an image based on text using the System.Drawing namespace.
private Bitmap CreateBitmapImage(string imageText, string imageUrl)
{
Bitmap myBitmap = new Bitmap(imageUrl);
Graphics g = Graphics.FromImage(myBitmap);
g.DrawString(imageText, new Font("Tahoma", 40), Brushes.White, new PointF(0, 0));
return (objBmpImage);
}
Once you have the Bitmap object in memory you can save it to the disk and call it's location from the web.
Bitmap bmp = CreateBitmapImage("my picture", #"C:\myBasePic.bmp");
bmp.Save(#"C:\bla.png", System.Drawing.Imaging.ImageFormat.png);
It would be good if you can specify why such requirement is there. One of such scenario that I had encountered was need of image buttons with different text (round corners with shaded background) - this can easily be achieved using CSS. If you really want to combine an image and text together then you can do that at server side (using say System.Drawing types) and serve the combined image over a handler/web-service.