So on my site, a user has the ability to create an avatar. It's created by the user selecting from several images; there is a base "skin" image, and png's that overlap that image that depict hair, eyes, mouth, etc.
I cannot save the user's avatar to the project's files, so the user's avatar data is stored in the database, and the png's are overlapped on the fly and displayed to the user.
However, I'd like to have the ability for the user to download their avatar as a jpeg by going to a page.
I have this little example set up that is working correctly:
protected void Page_Load(object sender, EventArgs e)
{
//User has skin1.png, eyes3.png, and mouth8.png
Bitmap bit = new Bitmap(System.Drawing.Image.FromFile(Server.MapPath("/images/skin1.png")), 80, 106);
Response.ContentType = "image/jpeg";
bit.Save(Response.OutputStream, ImageFormat.Jpeg);
}
But, as you can see, I only have this working for a single image. I'd like to create a bitmap from the multiple png's and output a jpeg.
Can someone help?
You can just paint the images on top of each other. The transparency of PNG images are handled correctly, but as JPEG images doesn't have any transparency you would want a background color to draw on.
Remember to be careful to dispose of the Graphics and Bitmap objects properly. They are not even recommended to be used in a web application...
// create image to draw on
using (Bitmap bit = new Bitmap(80, 106)) {
// fill with background
bit.Clear(Color.White);
// images to load
string[] skins = new string[] { "skin1.png", "eyes3.png", "mouth8.png" };
// create graphics object for drawing on the bitmap
using (Graphics g = Graphics.FromImage(bit)) {
foreach (string skin in skins) {
// load image
using (Image skinImage = Image.FromFile(Server.MapPath("/images/" + skin)) {
// draw image
g.DrawImage(skinImage, 0, 0, 80, 106);
}
}
}
Response.ContentType = "image/jpeg";
bit.Save(Response.OutputStream, ImageFormat.Jpeg);
}
I think you want to look into Graphics.FromImage when you're overlapping images. I assume there aren't any special effects (simply overlapping and positioning each layer).
So you could have something like this:
Graphics gfxAvatar = Graphics.FromImage(bit) //bit is your base image
gfxAvatar.DrawImage(secondLayer, new Point(X,Y)); //Draw secondLayer at X, Y
Continue that with the other layers. (It might be faster to have a Using loop around the initial Graphics gfxAvatar section since there are multiple layers. Then once that's done, you can convert it to a JPG using your bit.Save method.
Related
I am currently using this code to screen capture the panel I created, but whenever I am saving it, the quality is bad. Is there any way to maintain the good quality when saving it?
I tried resizing the panel but the result is still the same.
I tried doing a normal screen shot with the snipping tool and it also has the same result with the codes I use.
Any suggestions? or help?
private void SaveControlImage(Control theControl)
{
snapCount++;
int width = panel1.Size.Width;
int height = panel1.Size.Height;
Bitmap bm = new Bitmap(width, height, PixelFormat.Format64bppPArgb);
panel1.DrawToBitmap(bm, new Rectangle(0, 0, width, height));
//bm.Save(#"D:\TestDrawToBitmap.bmp", ImageFormat.Bmp);
bm.Save(deskTopPath + #"/Offer_" + snapCount.ToString() + "_" + DateTime.Now.ToString("yyyyMMdd") + #".jpg", System.Drawing.Imaging.ImageFormat.Jpeg);
}
Like here, it looks pixelated if you compare it to what you're reading now (like this website). I tried to screen cap the form but it looks like the uploaded picture so its useless
Screenshot:
Bitmap bmp= new Bitmap(controls.Width, controls.Height-50, System.Drawing.Imaging.PixelFormat.Format32bppArgb);
Graphics Grap = Graphics.FromImage(bmp);
Grap.CopyFromScreen(PointToScreen(controls.Location).X, PointToScreen(controls.Location).Y, 0, 0, AnhDoThi.Size, CopyPixelOperation.SourceCopy);
SaveFileDialog save = new SaveFileDialog();
save.Filter = "JPEG|*.jpg";
DialogResult tl = save.ShowDialog();
if (tl == DialogResult.OK)
{
bmp.Save(save.FileName);
MessageBox.Show("Completed !");
}
This is what I use to save a screenshot:
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
private void SaveControlAsImage(Control control, string path)
{
Bitmap bitmap = new Bitmap(control.Width, control.Height);
control.DrawToBitmap(bitmap, control.Bounds);
using (FileStream fs = new FileStream(path, FileMode.Create, FileAccess.ReadWrite))
{
/* using ImageFormat.Png or ImageFormat.Bmp saves the image with better quality */
bitmap.Save(fs, ImageFormat.Png);
}
}
Control screenshot using Windows Snipping Tool
Control screenshot using SaveControlAsImage (ImageFormat.Png)
Control screenshot using SaveControlAsImage (ImageFormat.Jpeg)
It's not the best quality (just a little blurry), but this removes the distortion around the text and keeps the right color.
Sidenote: You're not using the parameter (theControl) passed to your method, so you might as well remove it (not recommended), or change all the calls to panel1 inside the method to theControl and call the method like
this.SaveControlImage(this.panel1);
Also, when you're accessing just a property (i.e. this.panel1.Size.Width) it's better to just call the property instead of assign it to a variable. If you're calling a method and getting a value back (which you'll be using more than once), you must assign it to a variable (i.e. int arrayCount = array.Count()).
Windows Forms is not using vector graphics to draw the user interface. Therefore, all you can get generically is to draw the control to a Bitmap instead of to the screen. This works independently of whether your control is visible on the screen, but there is not more than that. If you want a higher-resolution image from a Windows Forms control, the only way is to resize the control and hope that it supports zooming.
how can I merge canvas in one image ? I need do this because I want to save merge image.
Here is my code:
WriteableBitmap wb = new WriteableBitmap(50, 50);
wb.LoadJpeg(stream);
Image t = new Image();
t.Source = wb;
Canvas.SetLeft(t, 130);
Canvas.SetTop(t, 130);
canvas1.Children.Add(t);
So now I want to merge these two images into one and use my save function.
You can use Graphics.FromImage() and Graphics.DrawImage()
http://msdn.microsoft.com/en-us/library/system.drawing.graphics.fromimage%28v=vs.110%29.aspx
http://msdn.microsoft.com/en-us/library/42807xh1%28v=vs.110%29.aspx
// Pseudo ...
using (Graphics gfx = Graphics.FromImage(image1))
{
gfx.DrawImage(image2, new Point(0, 0));
}
// image1 is now merged with image 2
You have not specified in details what do you mean by "merge". Do you mean, overlay the images on top of each other (if that's the case, what overlay mode? add? multiply? normal?) or merge the images side by side into a larger image (like taking 3 shots with a camera and then combining them into one long photo)? Either way, you will want to look at the System.Drawing namespace.
Assuming the latter one is the case. Here's what you'll do:
Image a = ...;
Image b = ...;
//assuming equal height, and I forget whether the ctor is width first or height first
Image c = new Image(a.Width + b.Width, a.Height);
Graphics g = Graphics.FromImage(c);
g.DrawImage(...); //a lot of overloads, better check out the documentation
SaveImage(c); //depending on how you want to save it
g.Dispose();
You need a third-party library, like WriteableBitmapEx. Look at the Blit method.
I have some code where I draw a function graph into a PictureBox graphics. The code is implemented in the Paint event. At some point I want to save a bitmap of the content of the graphics in a file.
I already read the answers to this question, and didn't found what I was looking for.
What I need is both to draw in the PictureBox (or any other control that you suggest) so that I don't loose the drawing when the control is hidden or something (so I think I cannot CreateGraphics()) and be able to save that drawing in a button's click event.
I'm willing to put the drawing logic out of the Paint event if necesary.
Thanks in advance.
I went ahead and answered the question based on my assumption,
I created a new Winforms application
I added a panel and a button
I created a Bitmap named buffer, and in the Form1 constructor, initialized it to the size of the panel. Instead of drawing directly to the panel, I draw to the Bitmap, then set the panels background image buffer; This will add persistance to your graphics. If you truly wish to write to a file, I can show you that. Just ask.
To write to file you will need this namespace reference :
using System.IO;
I added the ImageToDisc function you were asking for.
Here is the Code :
Bitmap buffer;
public Form1()
{
InitializeComponent();
panel1.BorderStyle = BorderStyle.FixedSingle;
buffer = new Bitmap(panel1.Width,panel1.Height);
}
private void button1_Click(object sender, EventArgs e)
{
using (Graphics g = Graphics.FromImage(buffer))
{
g.DrawRectangle(Pens.Red, 100, 100,100,100);
}
panel1.BackgroundImage = buffer;
//writes the buffer Bitmap to a binary file, only neccessary if you want to save to disc
ImageToDisc();
//just to prove that it did write it to file and can be loaded I set the mainforms background image to the file
this.BackgroundImage=FileToImage();
}
//Converts the image to a byte[] and writes it to disc
public void ImageToDisc()
{
ImageConverter converter = new ImageConverter();
File.WriteAllBytes(#"c:\test.dat", (byte[])converter.ConvertTo(buffer, typeof(byte[])));
}
//Converts the image from disc to an image
public Bitmap FileToImage()
{
ImageConverter converter = new ImageConverter();
return (Bitmap)converter.ConvertFrom(File.ReadAllBytes(#"c:\test.dat"));
}
I have a Graphics object that I've drawn on the screen and I need to save it to a png or bmp file. Graphics doesn't seem to support that directly, but it must be possible somehow.
What are the steps?
Here is the code:
Bitmap bitmap = new Bitmap(Convert.ToInt32(1024), Convert.ToInt32(1024), System.Drawing.Imaging.PixelFormat.Format32bppArgb);
Graphics g = Graphics.FromImage(bitmap);
// Add drawing commands here
g.Clear(Color.Green);
bitmap.Save(#"C:\Users\johndoe\test.png", ImageFormat.Png);
If your Graphics is on a form, you can use this:
private void DrawImagePointF(PaintEventArgs e)
{
... Above code goes here ...
e.Graphics.DrawImage(bitmap, 0, 0);
}
In addition, to save on a web page, you could use this:
MemoryStream memoryStream = new MemoryStream();
bitmap.Save(memoryStream, ImageFormat.Png);
var pngData = memoryStream.ToArray();
<img src="data:image/png;base64,#(Convert.ToBase64String(pngData))"/>
Graphics objects are a GDI+ drawing surface. They must have an attached device context to draw on ie either a form or an image.
Copy it to a Bitmap and then call the bitmap's Save method.
Note that if you're literally drawing to the screen (by grabbing the screen's device context), then the only way to save what you just drew to the screen is to reverse the process by drawing from the screen to a Bitmap. This is possible, but it would obviously be a lot easier to just draw directly to a Bitmap (using the same code you use to draw to the screen).
Try this, works fine for me...
private void SaveControlImage(Control ctr)
{
try
{
var imagePath = #"C:\Image.png";
Image bmp = new Bitmap(ctr.Width, ctr.Height);
var gg = Graphics.FromImage(bmp);
var rect = ctr.RectangleToScreen(ctr.ClientRectangle);
gg.CopyFromScreen(rect.Location, Point.Empty, ctr.Size);
bmp.Save(imagePath);
Process.Start(imagePath);
}
catch (Exception)
{
//
}
}
Graphics graph = CreateGraphics();
Bitmap bmpPicture = new Bitmap("filename.bmp");
graph.DrawImage(bmpPicture, width, height);
You are likely drawing either to an image or on a control. If on image use
Image.Save("myfile.png",ImageFormat.Png)
If drawing on control use Control.DrawToBitmap() and then save the returned image as above.
Thanks for the correction - I wasn't aware you can draw directly to the screen.
I'm tring to edit multipage tiff by creating Graphics from the image, but i encountered the error message: “A Graphics object cannot be created from an image that has an indexed pixel format.”
How can i edit multipage tiff?
I wrote something to extract single pages from a multipage tiff file.
// Load as Bitmap
using (Bitmap bmp = new Bitmap(file))
{
// Get pages in bitmap
int frames = bmp.GetFrameCount(System.Drawing.Imaging.FrameDimension.Page);
bmp.SelectActiveFrame(System.Drawing.Imaging.FrameDimension.Page, tiffpage);
if (bmp.PixelFormat != PixelFormat.Format1bppIndexed)
{
using (Bitmap bmp2 = new Bitmap(bmp.Width, bmp.Height))
{
bmp2.Palette = bmp.Palette;
bmp2.SetResolution(bmp.HorizontalResolution, bmp.VerticalResolution);
// create graphics object for new bitmap
using (Graphics g = Graphics.FromImage(bmp2))
{
// copy current page into new bitmap
g.DrawImageUnscaled(bmp, 0, 0);
// do whatever you migth to do
...
}
}
}
}
The snippet loads the tif file and extracts the one page (number in variable tiffpage) into a new bitmap. This is not indexed and an graphics object can be created.
The error : A Graphics object cannot be created from an image that has an indexed pixel format.
...has nothing to do with it being a multipage TIFF. An indexed image format means it has a palette of colours, e.g. it's a 256-colour image. A 1-bit image (B&W) would also count as having a palette of 2 colours.
You can't perform Graphics operations on images that use a palette, they'd need to be converted to 15-bit or more colour depth first.
Here is a link to a CodeProject sample that includes code for converting a TIFF file to a normal Bitmap, which you can then work with like any other Bitmap:
http://www.codeproject.com/KB/GDI-plus/BitonalImageConverter.aspx
I once wrote little utility to create encrypted pdfs from tiff images. Here is a piece of code to get pages from tiff image:
var bm= new System.Drawing.Bitmap('tif path');
var total = bm.GetFrameCount(System.Drawing.Imaging.FrameDimension.Page);
for(var x=0;x<total;x++)
{
bm.SelectActiveFrame(System.Drawing.Imaging.FrameDimension.Page,x);
var img=Image.GetInstance(bm,null,false);
//do what ever you want with img object
}