We Keep Coding

Extracting image subset (cropping) with SkiaSharp

I am trying to re-purpose an example from GitHub that deals with cropping an image with SkiaSharp. Specifically, I have a 4096x4096 sprite sheet from which I'd like to extract a sub-image (a specific sprite, if you will). To do that, I use the following snippet (where spriteContent is a byte array of the PNG image - byte[]):
var gch = GCHandle.Alloc(spriteContent, GCHandleType.Pinned);
try
{
var addr = gch.AddrOfPinnedObject();
using var pixmap = new SkiaSharp.SKPixmap(info, addr);
SkiaSharp.SKRectI rectI = new SkiaSharp.SKRectI(0, 0, 256, 256);
var subset = pixmap.ExtractSubset(rectI);
using var data = subset.Encode(SkiaSharp.SKPngEncoderOptions.Default)
File.WriteAllBytes("test2.png", data.ToArray());
}
finally
{
gch.Free();
}
The output of this code is, however, this kind of image:
Seems like an odd output. I suspect that I am doing something funky with teh SKRectI declaration, where the true rectangle is never used. What I understand it to be doing is create a rectangle from point 0 on top, 0 on bottom, 256 pixels tall, 256 pixels wide (i.e., manage the selection). If I adjust this to, let's say:
SkiaSharp.SKRectI rectI = new SkiaSharp.SKRectI(256, 256, 256, 256);
I get a NullReferenceException and there is nothing in the subset, so I must be misinterpreting how the rectangle selector works.
Any thoughts on what I might be doing wrong here?

The noise you get is caused by the fact, that you reinterpret raw encoded png bytes as pixel data. You need to decode the image first:
using var skBitmap = SKBitmap.Decode(spriteContent);
using var pixmap = new SKPixmap(skBitmap.Info, skBitmap.GetPixels());
SkiaSharp.SKRectI rectI = new SkiaSharp.SKRectI(0, 0, 256, 256);
var subset = pixmap.ExtractSubset(rectI);
using var data = subset.Encode(SkiaSharp.SKPngEncoderOptions.Default);
File.WriteAllBytes(#"test2.png", data.ToArray());

Saving 32-bit Unsigned Byte Array to File System

I am trying to save a byte array (of an image) to the file system using C# and it isn't working using either method I have tried, here is code sample 1:
string path = #"c:\ppd" + g.ToString() + ".jpg";
using (MemoryStream inputStream = new MemoryStream(image))
{
Image returnImage = Image.FromStream(inputStream);
returnImage.Save(path, ImageFormat.Jpeg);
}
With this code I get 'Parameter is not valid' when sending the data to the service. So that's obviously the wrong code for the array, so I hit google and came up with this code:
string path = #"c:\ppd\" + g.ToString() + ".jpg";
using (MemoryStream inputStream = new MemoryStream(image))
{
using (Stream file = File.Create(path))
{
byte[] buffer = new byte[8 * 1024];
int len;
while ((len = inputStream.Read(buffer, 0, buffer.Length)) > 0)
{
file.Write(buffer, 0, len);
}
}
}
This code writes the file to the file system, but when you try to open it it helpfully says 'This is not a valid bitmap file, or it's format is not currently supported.
We get the byteArray from Flex using:
bitmapData.getPixels(0, 0, bitmapData.width, bitmapData.height);
And the bitmapData comes from the Android camera (via the Distriqt Camera ANE). The image displays fine in the app, but I have no idea where to go next with this, please help.
EDIT:
The code in Flex to get the byteArray is:
<s:BitmapImage id="bitmapImage" width="100%"
maxHeight="{this.height/2}"
source="{profileModel.captureBitmapPreview}"
/>
<s:Button click="{dispatchEvent(new PictureEvent
(PictureEvent.UPLOAD,
0, pictureModel.captureBitmapPreview.getPixels(new Rectangle(0,0,pictureModel.captureBitmapPreview.width,pictureModel.captureBitmapPreview.height))))}"/>
/* this is the alternative which still doesn't work **/
<s:Button click="{dispatchEvent(new PictureEvent
(PictureEvent.UPLOAD,
0, bitmapImage.getPixels(new Rectangle(0,0,bitmapImage.width,bitmapImage.height))))}"/>
PictureEvent takes 3 parameters, type:String, id:int = 0, image:ByteArray = null.
SECOND EDIT: Here is the code that creates the bitmapData:
private function camera_capturedImageHandler(evt:CameraDataEvent):void
{
Camera.instance.setPresetMode(CameraMode.PRESET_MEDIUM);
Camera.instance.addEventListener(CameraEvent.VIDEO_FRAME, camera_videoFrameHandler, false, 0, true);
if (_captureBitmapData.width != evt.data.width || _captureBitmapData.height != evt.data.height)
{
_captureBitmapData = new BitmapData(evt.data.width, evt.data.height, false);
}
_captureBitmapData.draw(evt.data);
var tbd:BitmapData = new BitmapData(FlexGlobals.topLevelApplication.width, FlexGlobals.topLevelApplication.height, false)
tbd = applyOrientation(_bitmapData, "6");
profileModel.captureBitmapPreview.copyPixels(tbd, new Rectangle(0, ((FlexGlobals.topLevelApplication.height/2)-(FlexGlobals.topLevelApplication.height/4)), FlexGlobals.topLevelApplication.width, FlexGlobals.topLevelApplication.height/2), new Point(0, 0));
}
THIRD EDIT:
I has done some testing and discovered that this code should work, it is a variation on the first block above that throws 'Parameter is not valid'
ImageConverter imageConverter = new ImageConverter();
Bitmap bm = (Bitmap)imageConverter.ConvertFrom(image);
if (bm != null && (bm.HorizontalResolution != (int)bm.HorizontalResolution || bm.VerticalResolution != (int)bm.VerticalResolution))
{
bm.SetResolution((int)(bm.HorizontalResolution + 0.5f),(int)(bm.VerticalResolution + 0.5f));
}
bm.Save(path, ImageFormat.Jpeg);
So now I am sure the error is with the byteArray, but I genuinely cannot see what I am doing wrong. I have the bitmapData and it is valid, and it looks like I am collecting the data I need, the written file is nearly 700Kb in size, but something is wrong.
If someone could tell me what is wrong on the Flex side of this equation I would be forever grateful. I have the BitmapImage on the display list, it is bound to the model correctly and I have tried different ways of pointing to the source and drawing up the rectangle.

Ok, so #Lorek was right, the byteArray just contains pixel data and no formatting information. We don't know why this is the case but based on that knowledge and a little digging in the database I realised that this has been the situation for a while and I needed a solution that would solve it.
So in answer to the question 'How do you convert pixel data from a byteArray into an image?' I came up with this, still need a little help, but basically this solves the issue I am having (more after the code)
Bitmap bitmap = new Bitmap(150, 150, PixelFormat.Format32bppRgb);
BitmapData bmData = bitmap.LockBits(new System.Drawing.Rectangle(0, 0, bitmap.Width, bitmap.Height), ImageLockMode.ReadWrite, bitmap.PixelFormat);
IntPtr pNative = bmData.Scan0;
Marshal.Copy(image, 0, pNative, image.Length);
bitmap.UnlockBits(bmData);
bitmap.Save(path, ImageFormat.Png);
So I change the Rectangle size in Flex so I knew what I was working with, and posted the btyeArray to this method, which beautifully writes out a PNG for me.
It's slightly blue, well it's really blue and I am not quite sure why, take a look:
http://ec2-52-89-85-67.us-west-2.compute.amazonaws.com/imagedata/ppd/3898ae89-e4e0-4d03-97d7-dac4e3b618d5.png
It is supposed to be black:
http://ec2-52-89-85-67.us-west-2.compute.amazonaws.com/imagedata/ppd/capture.png
So any of you .Net people know what happened and can advise me (I heard somewhere that I need to switch the order of the colors so instead of rgb it gets switched around, but I have no idea how or why this would be the issue).
EDIT Here is the solution to that, it's slow, it's pointless and it takes too long: http://www.codeproject.com/Articles/2056/Image-Processing-for-Dummies-with-C-and-GDI-Part-3
Or if maybe we can solve the actual Flex issue that's be great although I have given up all hope of SO being useful for Flex support any more
Thanks you everyone for your patience.

Reduce image quality/size without loading into memory?

I am totally stuck on image resizing because I am getting OutOfMemoryException using the typical examples of image resizing that can be found on the many questions that feature OOMs.
I even tried DynamicImage, which can be found on Nuget, and this also threw an OutOfMemoryException.
Can anyone tell me how I can reduce the quality/size of an image in C#, without loading it into memory?
Edit: I want the c# equivalent to this, if there is one?
Edit: I give up with the typical methods of resizing, as I just can't avoid OutOfMemoryExceptions on my live site, which is running on an old server.
Further Edit: My server's OS is Microsoft Server 2003 Standard Edition
I can post examples of my code, but I'm trying to find a way around OutOfMemoryExceptions.
public static void ResizeImage(string imagePath, int imageWidth, int imageHeight, bool upscaleImage) {
using (Image image = Image.FromFile(imagePath, false)) {
int width = image.Width;
int height = image.Height;
if (width > imageWidth || height > imageHeight || upscaleImage) {
image.RotateFlip(System.Drawing.RotateFlipType.Rotate180FlipX);
image.RotateFlip(System.Drawing.RotateFlipType.Rotate180FlipX);
float ratio = 0;
if (width > height) {
ratio = (float)width / (float)height;
width = imageWidth;
height = Convert.ToInt32(Math.Round((float)width / ratio));
}
else {
ratio = (float)height / (float)width;
height = imageHeight;
width = Convert.ToInt32(Math.Round((float)height / ratio));
}
using (Bitmap bitmap = new Bitmap(width, height)) {
bitmap.SetResolution(image.HorizontalResolution, image.VerticalResolution);
using (Graphics graphic = Graphics.FromImage(bitmap)) {
graphic.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
graphic.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
graphic.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality;
graphic.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
graphic.DrawImage(image, 0, 0, width, height);
string extension = ".jpg"; // Path.GetExtension(originalFilePath);
using (EncoderParameters encoderParameters = new EncoderParameters(1)) {
encoderParameters.Param[0] = new EncoderParameter(Encoder.Quality, 100L);
using (MemoryStream imageMemoryStream = new MemoryStream()) {
bitmap.Save(imageMemoryStream, GetImageCodec(extension), encoderParameters);
using (Image result = Image.FromStream(imageMemoryStream, true, false)) {
string newFullPathName = //path;
result.Save(newFullPathName);
}
}
}
}
}
}
}
}
I also tried this code as I hoped GetThumbnailImage would reduce the picture quality/size for me, but this is also throwing an OOM exception:
viewModel.File.SaveAs(path);
Image image = Image.FromFile(path);
Image thumbnail = image.GetThumbnailImage(600, 600, null, new IntPtr());
image.Dispose();
File.Delete(path);
thumbnail.Save(path);
thumbnail.Dispose();
Again, both my code examples work for me in my local machine, so I am not trying to find faults/fixes in the code as they should be fine. I'm looking for any solution to avoid the OOM exceptions, I had the idea of reducing the fize size somehow without loading the image into memory, but any alternative ideas that can help me would be appreciated.

You can try using ImageMagick via command line or the .NET bindings. ImageMagick has some options to resize as the file is being read, which should reduce memory consumption.

It may be that the "image" you are using is either not a supported format or is corrupted.

I failed to mention that I inherited legacy code that was not disposing of images properly, because I did not think it was relevant since fixing it. The strange thing is, after restarting the website and the AppPool, I was able to upload pictures again without getting an OutOfMemoryExcepiton. I'm struggling to understand why this happened as I have changed the code to dispose of images properly and have done several deploys since, so I would expect that to clear any undisposed images from memory? All the code for picture resizing and uploading was in a static class and I believe that GC.collect() does not work on static variables?
My theory is that the undisposed images have built up in memory and have remained even when I have redepolyed to the site, as that's the only conclusion I can reach since the code began working again after restarting the app pool.
I would delete my question but it has been answered now, happy to reassign the answer if anyone can help explain what was going on here.

Image cropping and resizing ImageMagick vs GDI+ in C#

I have a web application where users can upload pictures to create their galleries. Years ago when I wrote the application I choose ImageMagick, and I did all my cropping and resizing with ImageMagick.
Now that I am rewriting the application from scratch, I replaced ImageMagick with native GDI+ operations, but the more I learn around GDI+ the more I am scared I made the wrong choice.
Everywhere I read that GDI+ is for the desktop and should not be used on a server application. I don't know the details, but I guess it's for the memory consumption, and indeed I can see GDI+ is using more memory to do the same operation (crop and resize) over the same image than ImageMagick (while to be honest GDI+ is faster).
I believed GDI+, ImageMagick or any other library should be more or less the same for those basic operations, and I liked the idea of using native GDI+ believing whatever MS is shipping with .NET should be at least OK.
What is the right approach/tool to use?
This is the code I use to crop:
internal Image Crop(Image image, Rectangle r)
{
Bitmap bmpCrop;
using (Bitmap bmpImage = new Bitmap(image))
{
bmpCrop = bmpImage.Clone(r, bmpImage.PixelFormat);
bmpImage.Dispose();
}
return (Image)(bmpCrop);
}
This is the code I use to resize:
internal Image ResizeTo(Image sourceImage, int width, int height)
{
System.Drawing.Image newImage = new Bitmap(width, height);
using (Graphics gr = Graphics.FromImage(newImage))
{
gr.SmoothingMode = SmoothingMode.AntiAlias;
gr.InterpolationMode = InterpolationMode.HighQualityBicubic;
gr.PixelOffsetMode = PixelOffsetMode.HighQuality;
gr.DrawImage(sourceImage, new Rectangle(0, 0, width, height));
gr.Dispose();
}
return newImage;
}

Can you link to somewhere people have said that GDI+ shouldn't be used on the server? Maybe they know something I don't.
I know a few things about how GDI+ works but nothing about ImageMagick. I did happen upon this page describing ImageMagick's architecture: http://www.imagemagick.org/script/architecture.php
It seems ImageMagick will internally convert images to an uncompressed format with 4 channels and a specific bit depth, typically 16 bits per channel, and do its work with the uncompressed data, which may be in memory or on disk depending on the size. 'identify -version' will tell you what your bit depth is. My impression is that in practice ImageMagick will typically work with a 64-bit RGBA buffer internally, unless you use a Q8 version which will use 32-bit RGBA. It also can use multiple threads, but I doubt that will matter unless you're working with very large images. (If you are working with very large images, ImageMagick is the clear winner.)
GDI+ Bitmap objects will always store uncompressed data in memory and will generally default to 32-bit RGBA. That and 32-bit RGB are probably the most efficient formats. GDI+ is a drawing library, and it wasn't designed for large images, but at least a Bitmap object won't hold any resources other than the memory for the pixel data and image metadata (contrary to popular belief, they do not contain HBITMAP objects).
So they seem very similar to me. I can't say one is clearly better than the other for your use case. If you go with imagemagick, you should probably use a Q8 build for the speed and memory gains, unless the extra precision is important to you.
It seems like if your only operations are load, save, scale, and crop, you should be able to easily replace the implementation later if you want.
Unless you need to work with metafiles, you should probably be using Bitmap objects internally and not Images. Then you wouldn't have to create an intermediate Bitmap object in your Crop function. That intermediate object may be behind some of the extra memory consumption you observed. If you get Image objects from an external source, I'd suggest trying to cast them to Bitmap and creating a new Bitmap if that doesn't work.
Also, the "using" statement calls Dispose automatically, so there's no need to also call it explicitly.

I wrote something myself:
public void ResizeImageAndRatio(string origFileLocation, string newFileLocation, string origFileName, string newFileName, int newWidth, int newHeight, bool resizeIfWider)
{
System.Drawing.Image initImage = System.Drawing.Image.FromFile(origFileLocation + origFileName);
int templateWidth = newWidth;
int templateHeight = newHeight;
double templateRate = double.Parse(templateWidth.ToString()) / templateHeight;
double initRate = double.Parse(initImage.Width.ToString()) / initImage.Height;
if (templateRate == initRate)
{
System.Drawing.Image templateImage = new System.Drawing.Bitmap(templateWidth, templateHeight);
System.Drawing.Graphics templateG = System.Drawing.Graphics.FromImage(templateImage);
templateG.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
templateG.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
templateG.Clear(Color.White);
templateG.DrawImage(initImage, new System.Drawing.Rectangle(0, 0, templateWidth, templateHeight), new System.Drawing.Rectangle(0, 0, initImage.Width, initImage.Height), System.Drawing.GraphicsUnit.Pixel);
templateImage.Save(newFileLocation + newFileName, System.Drawing.Imaging.ImageFormat.Jpeg);
}
else
{
System.Drawing.Image pickedImage = null;
System.Drawing.Graphics pickedG = null;
Rectangle fromR = new Rectangle(0, 0, 0, 0);
Rectangle toR = new Rectangle(0, 0, 0, 0);
if (templateRate > initRate)
{
pickedImage = new System.Drawing.Bitmap(initImage.Width, int.Parse(Math.Floor(initImage.Width / templateRate).ToString()));
pickedG = System.Drawing.Graphics.FromImage(pickedImage);
fromR.X = 0;
fromR.Y = int.Parse(Math.Floor((initImage.Height - initImage.Width / templateRate) / 2).ToString());
fromR.Width = initImage.Width;
fromR.Height = int.Parse(Math.Floor(initImage.Width / templateRate).ToString());
toR.X = 0;
toR.Y = 0;
toR.Width = initImage.Width;
toR.Height = int.Parse(Math.Floor(initImage.Width / templateRate).ToString());
}
else
{
pickedImage = new System.Drawing.Bitmap(int.Parse(Math.Floor(initImage.Height * templateRate).ToString()), initImage.Height);
pickedG = System.Drawing.Graphics.FromImage(pickedImage);
fromR.X = int.Parse(Math.Floor((initImage.Width - initImage.Height * templateRate) / 2).ToString());
fromR.Y = 0;
fromR.Width = int.Parse(Math.Floor(initImage.Height * templateRate).ToString());
fromR.Height = initImage.Height;
toR.X = 0;
toR.Y = 0;
toR.Width = int.Parse(Math.Floor(initImage.Height * templateRate).ToString());
toR.Height = initImage.Height;
}
pickedG.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
pickedG.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
pickedG.DrawImage(initImage, toR, fromR, System.Drawing.GraphicsUnit.Pixel);
System.Drawing.Image templateImage = new System.Drawing.Bitmap(templateWidth, templateHeight);
System.Drawing.Graphics templateG = System.Drawing.Graphics.FromImage(templateImage);
templateG.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
templateG.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
templateG.Clear(Color.White);
templateG.DrawImage(pickedImage, new System.Drawing.Rectangle(0, 0, templateWidth, templateHeight), new System.Drawing.Rectangle(0, 0, pickedImage.Width, pickedImage.Height), System.Drawing.GraphicsUnit.Pixel);
templateImage.Save(newFileLocation + newFileName, System.Drawing.Imaging.ImageFormat.Jpeg);
templateG.Dispose();
templateImage.Dispose();
pickedG.Dispose();
pickedImage.Dispose();
}
initImage.Dispose();
}

How can I get better results when shrinking an image

I'm scaling images down in c#, and I've compared my methods with the best method in Photoshop cs5 and cannot replicate it.
In PS i'm using bicubic sharper, which looks really good. However, when trying to do the same in c# I don't get as high quality results. I've tried bicubic interpolation as well as HQ bicubic, smoothing mode HQ/None/AA. Composition modes, I've tried about 50 different variations and each one comes out pretty close to the image on the right.
You'll notice the pixelation on her back and around the title, as well as the authors name not coming out too well.
(Left is PS, right is c#.)
It seems that c# bicubic does too much smoothing even with smoothing set to none. I've been playing around with many variations of the following code:
g.CompositingQuality = CompositingQuality.HighQuality;
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
g.PixelOffsetMode = PixelOffsetMode.None;
g.SmoothingMode = SmoothingMode.None;
Edit: As requested here is the starting image (1mb).

Perhaps I am missing something, but I have typically used the following code below to resize/compress JPEG Images. Personally, I think the result turned out pretty well based on your source image. The code doesn't handle a few edge cases concerning input parameters, but overall gets the job done (I have additional extension methods for Cropping, and Combining image transformations if interested).
Image Scaled to 25% original size and using 90% Compression. (~30KB output file)
Image Scaling Extension Methods:
public static Image Resize(this Image image, Single scale)
{
if (image == null)
return null;
scale = Math.Max(0.0F, scale);
Int32 scaledWidth = Convert.ToInt32(image.Width * scale);
Int32 scaledHeight = Convert.ToInt32(image.Height * scale);
return image.Resize(new Size(scaledWidth, scaledHeight));
}
public static Image Resize(this Image image, Size size)
{
if (image == null || size.IsEmpty)
return null;
var resizedImage = new Bitmap(size.Width, size.Height, image.PixelFormat);
resizedImage.SetResolution(image.HorizontalResolution, image.VerticalResolution);
using (var g = Graphics.FromImage(resizedImage))
{
var location = new Point(0, 0);
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
g.DrawImage(image, new Rectangle(location, size), new Rectangle(location, image.Size), GraphicsUnit.Pixel);
}
return resizedImage;
}
Compression Extension Method:
public static Image Compress(this Image image, Int32 quality)
{
if (image == null)
return null;
quality = Math.Max(0, Math.Min(100, quality));
using (var encoderParameters = new EncoderParameters(1))
{
var imageCodecInfo = ImageCodecInfo.GetImageEncoders().First(encoder => String.Compare(encoder.MimeType, "image/jpeg", StringComparison.OrdinalIgnoreCase) == 0);
var memoryStream = new MemoryStream();
encoderParameters.Param[0] = new EncoderParameter(Encoder.Quality, Convert.ToInt64(quality));
image.Save(memoryStream, imageCodecInfo, encoderParameters);
return Image.FromStream(memoryStream);
}
}
Usage:
using(var source = Image.FromFile(#"C:\~\Source.jpg"))
using(var resized = source.Resize(0.25F))
using(var compressed = resized.Compress(90))
compressed.Save(#"C:\~\Output.jpg");
NOTE:
For anyone who may comment, you cannot dispose the MemoryStream created in the Compress method until after the image is disposed. If you reflect in to the implementation of Dispose on MemoryStream, it is actually save to not explicitly call dispose. The only alternative would be to wrap the image/memory stream in a custom implementation of a class that implements Image/IDisposable.

Looking at the amount of JPEG artifacts, especially at the top of the image, I think you set the jpg compression to high. That results in a smaller (filesize) file, but reduces image quality and seems to add more blur.
Can you try saving it in a higher quality? I assume the line containing CompositingQuality.HighQuality does this already, but maybe you can find an even higher quality mode. What are the differences in file size between Photoshop and C#? And how does the Photoshop image look after you saved it and reopened it? Just resizing in Photoshop doesn't introduce any jpg data loss. You will only notice that after you've saved the image as jpg and then closed and reopened it.

I stumbled upon this question.
I used this code to use no compression of the jpeg and it comes out like the PS version:
ImageCodecInfo[] codecs = ImageCodecInfo.GetImageEncoders();
ImageCodecInfo ici = null;
foreach (ImageCodecInfo codec in codecs)
{
if (codec.MimeType == "image/jpeg")
ici = codec;
}
EncoderParameters ep = new EncoderParameters();
ep.Param[0] = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, (long)100);