Drawing shapes on an image control and save the new image - c#

This is a wpf project in which i have a window that views some images in image controls - each image is viewed alone in the window - and i want to add the ability to draw some shapes or write a text on the image and then save the edited image.
I tried putting the image control inside an inkcanvas but that didn't really gave me what i want.
so how can i achieve that ?

Related

PictureBox.BringToFront(); Not working with transparency

I need to put a picturebox above another picture box, the picturebox on top is a png file with a transparent background but when trying to use Picturebox.BringToFront(); the picturebox below is replaced with what is in the background of the form.
I tried to get around this using picturebox.Parent = picturebox2, but I don't want the picturebox to be cut off at the edges of the other picturebox it's on top of.

How can I capture as bitmap only what a picturebox is displaying, without using "copy from screen"?

Specifically: I need to capture as a bitmap a specific region of what a picturebox is actually displaying. The coordinates of the region are specified by the bounds of a control that I have overlayed on top of the picturebox (but that belongs to the picturebox). The control is hidden when I make the "snapshot" of the region.
I tried using normal screen capture methods (CopyFromScreen), but you can't really control the timing there. So it was capturing "interstitial" states, like transitions between photos in my picturebox. Frequently it was only capturing purely black images (the background color of the picture box).
So I tried just converting the image (picturebox.image property) being displayed to a bitmap. The problem there is that the picture box is rarely showing exactly the image. It's displaying some PORTION of the image, scaled and clipped as appropriate to it's sizemode (which is zoom). So the I can't just take my control coordinates and clip them from the image as a whole.
So I tried to estimate what portion of the image was being displayed, and correcting my rectangle based on that. Turns out that I was basically re-creating the "zoom" code of the picturebox to do this (using aspect ratio of the picturebox, the aspect ratio of the image, guessing at what level of scaling is currently happening to the image if it's larger or smaller than the picturebox, etc). It was not pretty.
So: now I need a method of just capturing only the bitmap currently being displayed in the client area of the picturebox, including the photo and any black "letterboxing" currently being displayed around it. Anybody got one?
Remember that I can't rely on using CopyFromScreen. It's not reliable enough for my purposes. I think I need a method of getting picturebox to TELL me the bits it is displaying.
This will copy and save the currently shown content of the PictureBox including a BackgroundImage (if there is one and if it shines through) and also all Controls that belong to the PictureBox, like Labels etc.. Also included are elements drawn in the Paint event. Things drawn outside the Paint event are non-persistent and will not be included.
using (Bitmap bmp = new Bitmap(pictureBox1.ClientSize.Width,
pictureBox1.ClientSize.Height))
{
pictureBox1.DrawToBitmap(bmp, pictureBox1.ClientRectangle);
bmp.Save(yourfilename, ImageFormat.Png);
}
Note: On my test Form the PicureBox is sitting inside an AutoScroll Panel pan_PBscroll. The PictureBox is displaying pixels 1:1 and is therefore, with a photograph loaded, much bigger than the Panel, the Form or even the Screen. So to clip to the actually visible parts I could not use the pictureBox1.ClientSize and pictureBox1.ClientRectangle but used the dimensions of that Panel. This may well apply to you, too.
I'm not sure about your timing issues. But since you mentioned CopyFromScreen here are a few differences:
CopyFromScreen makes a 1:1 copy of each screen pixel
This includes non-persistent drawings and excludes anything covered or hidden
Control.DrawToBitmap makes the Control draw itself onto a Bitmap, just as it draws itself during Paint
This excludes anything that doesn't belong to the Control but includes all members of its Controls collection
This also excludes non-persistent drawings but includes the full Size of the Control, whether it fits on the Form or Screen or not and whether it is hidden or covered or not.
For Controls with active Scrollbars only the visible parts are copied. To copy all you need to resize it temporarily. Then you can get a complete image of a listbox even if it has a thousand items..
Since you're using a PictureBox I would say to take a look PictureBox.Image where you can get the Bitmap object.
Hope it helps.

How to erase part of Image by finger on WinPhone?

I have heavy task for me.
I have simple WinPhone silverlight page, on page I have Canvas.
On Canvas I have Image control with photo.
I want that user can erase part of picture on Image control by finger (similary on erase in MS Paint).
And after change photo user can save new image.
I don't fins solution for this task.
Could you please help me?
Put another Canvas into the Canvas, overlaying the Image. Let the user draw on this new Canvas (Drawing things on a Canvas). Save the result by calling WritableBitmap.Render(parentCanvas) and SaveJpeg (Saving a WriteableBitmap).
You might need to add some Transformations to handle different Image sizes.
You could put your image inside a Grid and put an InkPresenter on top and to erase just use white ink. Here is a getStarted to use the inkpresenter : link. Finally when you want to save the result, just saved the grid using WriteableBitmap.Render and MediaLibrary.SaveJpeg to save it to the user Library.

Equivalent of canvas in Windows forms

I am creating a simple app to display multiple images one below the other.
In WPF, I used Number of canvas equivalent to number of images and added those canvas to the main canvas.
And using Image control in each canvas, i uploaded the images with me and it is looking good.
Now, I Am trying to do the same in Windows forms.
I tried Panel (as the main canvas in WPF) and draw images over it by using Panel_Paint event. it is fine. But I need to add something(as I added multiple canvas in WPF), but did not get strike any thing.
I planned for few panels, but all them need Panel_Paint to draw images over it.That is some what difficult to maintain... any other ideas?
You can create your own custom control and override OnPaint method. There you will be able to draw whatever you like in Canvas like mode. Create element specify its coordinates, draw it with Graphics object. And for overlaying use linear drawing order, items drawn later will be top most.
If you want to create a Paint-like canvas, where you can draw simple graphics and images, you could use an instance of Graphics, like the following:
// myPictureBox is the control where your graphics will be drawn
Graphics myCanvas = myPictureBox.CreateGraphics();
If you want to display a group of images, like .jpg are displayed in the files explorer, you could use a ListView.

Paint in A Grid And Export Image? (Windows or Mac)

I want the user to be able to paint in a grid in my Windows application 16x16 pixels large. Of course these are visiably bigger when editing but then can be output as a png file at its actual 16x16 size.
Im not asking for a full solution of course but if you could point me in the right direction for what to use to build up the grid which will allow me paint colours into it and then output it.
Any help much appreciated, thanks.
here is a somewhat general idea:
depending on the application, i'd use a simple picturebox, load a bitmap (from file, db, create empty, ...) and handle mouse clicks on that ...
translate the screen coordinates to your 16x16 matrix, and use some "needle-scheme" to interact with that image (means you have some sort of colorpicker that selects the color to use, and a click on a pixel sets it to that color)
since your image is only 16x16 you will probably want to set the picturebox to stretch or zoom mode
output of an image object is rather simple if you make use of the System.Drawing.Image class
if you need further details/help, let me know...

Categories

Resources