Develop Reference

SkiaSharp text drawn over canvas not saved

I'm drawing an SKBitmap on SKCanvas, then drawing some text over the canvas, then saving the image to disk. The text is not saved to the file on disk, and I only see the original bitmap. What am I missing ?
SKBitmap pngImage = SKBitmap.Decode(msBitmap.ToArray());
mycanvas.DrawBitmap(pngImage, 0, 0);
mycanvas.DrawText("Text", 10, 10, myBrush);
using (var stream = File.OpenWrite(myfileName))
{
SKData d = SKImage.FromBitmap(pngImage).Encode(SKEncodedImageFormat.Png, 100);
d.SaveTo(stream);
}

You are drawing both the bitmap and the text to the canvas (mycanvas) - but when you save, you are saving just the image data (pngImage). You need to get what is drawn on the canvas, and save that.
You might try the Snapshot() method, available on the surface (which owns the SKCanvas object).

Steam Game Icon

I am making a file explorer and for the thumbnail view it requires the icon of a file. I have gotten an icon for all of the files except for steam games. I have looked around and cannot find a way to get the icon like Windows does.
Edit:
This is what i currently use to get my file icons:
public static Bitmap GetBigImage(string path, Size size)
{
Bitmap bmp;
string ext = System.IO.Path.GetExtension(path);
if (ext == ".exe")
{
Icon ico = Icon.ExtractAssociatedIcon(path);
bmp = ico.ToBitmap();
ico.Dispose();
}
else
{
if (imageType.Contains(ext.Replace(".", "")))
{
Image img = Image.FromFile(path);
bmp = new Bitmap(img, new Size(size.Width - 20, 80));
img.Dispose();
}
else
{
Icon ico = Win32.GetLargeIconForExtension(ext);
bmp = ico.ToBitmap();
ico.Dispose();
}
}
return bmp;
}
This is the path I am trying to get steam://rungameid/209170
In GetBigImage, if I see if the path contains steam:// (in either of the if statements) the method still returns no icon.

There is a Database of Steam Games here. Each entry leads to a page that includes a link to the game's icon.
Your ID leads to this page where this link points to the icon.
Note that there usually is a real icon under the field 'clienticon' and also a plain jpg strangely named 'icon'!
For an explorer type app I recommend caching those icon.
Hope this helps.

Have you tried,
Icon.ExtractAssociatedIcon
From the System.Drawing namespace?
http://msdn.microsoft.com/en-us/library/system.drawing.icon.extractassociatedicon(v=vs.110).aspx

PictureBox and Dispose

I must delete an image file if it already exists (overwriting it) while a PictureBox is showing the same.
However If I try to delete the file it's blocked by PictureBox.
So I write the following code:
if (File.Exists(file))
{
Image _tmp = (Image)current_pic.Image.Clone();
current_pic.Image.Dispose();
current_pic.Dispose();
File.Delete(path);
current_pic.Image = _tmp;
current_pic.Image.Save(file, ImageFormat.Jpeg);
}
else
current_pic.Image.Save(file, ImageFormat.Jpeg);
and the Image on filesystem is deleted thanks to pic.Dispose() but the Image is not
more showed inside the PictureBox.
Maybe does Dispose() method invalidate PictureBox?

You can read a image into the picture box without locking it as shown below
Image img;
string file = #"d:\a.jpg";
using (Bitmap bmp = new Bitmap(file))
{
img = new Bitmap(bmp);
current_pic.Image = img;
}
if (File.Exists(file))
{
File.Delete(file);
current_pic.Image.Save(file, ImageFormat.Jpeg);
}
else
current_pic.Image.Save(file, ImageFormat.Jpeg);
I have updated the code to even support the save operation.
While the previous code supported the delete even after linking the images. The stream was closed and this while saving resulted in a GDI+ error.
The newly updated code meets all your requirements as follows
Allowing a delete of the file while the images is linked
Save of the Image using the Image property in the Picturebox control

Resize Image of any size to fixed dimension using C# ASP.Net web form

I have done image resizing while allowing user to upload a specific size image and then crop them to different dimension i have also used jCrop in project to allow users to upload a image of specific size and then select the image area & crop it accordingly.
In new project i have a requirement where user can upload any size image which is at least larger than 500Px in width and then i have to allow user to select the part of image using jCrop and then save image in different dimension of 475x313 , 310x205 while maintaining the aspect ration.
I can do it with if i allow the used to upload a fixed size image but i am not sure how i can handle variable size image.
I also need to display the image uploaded before cropping in a fixed size box.. let us say 300x200. in this area i have to allow the user to select the part of the image before i can crop.
Issue i am facing is how to handle variable length image and show it is a fixed image box of 300x200px.

I wrote an article on using jCrop with dynamically-resized uploaded images, which seems to be what you're needing.
If you're looking for an open-source ASP.NET control that does it for you, check out cropimage.net.

Want to going to by programmatically than you can try this :
if you are using file upload for upload images
string path = Path.GetFileName(fileuploaderID.PostedFile.FileName);
ConvertThumbnails(width, height, fileuploaderID.FileBytes, path);
your function
public void ConvertThumbnails(int width, int height, byte[] filestream, string path)
{
// create an image object, using the filename we just retrieved
var stream = new MemoryStream(filestream);
System.Drawing.Image image = System.Drawing.Image.FromStream(stream);
try
{
int fullSizeImgWidth = image.Width;
int fullSizeImgHeight = image.Height;
float imgWidth = 0.0F;
float imgHeight = 0.0F;
imgWidth = width;
imgHeight = height;
Bitmap thumbNailImg = new Bitmap(image, (int)imgWidth, (int)imgHeight);
MemoryStream ms = new MemoryStream();
// Save to memory using the Jpeg format
thumbNailImg.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
// read to end
byte[] bmpBytes = ms.GetBuffer();
item.Attachments.Add(path, bmpBytes);
thumbNailImg.Dispose();
ms.Close();
}
catch (Exception)
{
image.Dispose();
}
}

Creating a jpeg from several overlapping png's

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.