Porting system.drawing to imagesharp

[jcageman]

I am trying to use image sharp instead of System.Drawing, but noticing some larger file sizes and slightly different images. Could anyone advise how to rewrite this piece of code?

Bitmap bmpInput = new Bitmap(new MemoryStream(imageData));
Bitmap bmpOutput = new Bitmap(bmpInput.Width, bmpInput.Height);
Rectangle rect = new Rectangle(Point.Empty, bmpInput.Size);
using (Graphics G = Graphics.FromImage(bmpOutput))
            {
                G.Clear(target);
                G.DrawImageUnscaledAndClipped(bmpInput, rect);
            }

using (MemoryStream ms = new MemoryStream())
            {
                bmpOutput.Save(ms, ImageFormat.Png);
                return ms.GetBuffer();
            }

I current am using the following code to replace it:

using var imageMemoryStream = new MemoryStream(imageData);
using var image = Image.Load(imageMemoryStream);
var transparentImage = image.Clone(x => x.BackgroundColor(target));
using MemoryStream outputMemoryStream = new MemoryStream();

transparentImage.SaveAsPng(outputMemoryStream);
            return outputMemoryStream.GetBuffer();

ps. I've also noticed that simply loading an image and saving it again already changes it, which is rather weird?

[antonfirsov]

Your code looks correct, one remark (unrelated to the question) that you should make sure you also dispose transparentImage or use image.Mutate(...) instead of .Clone().

loading an image and saving it again already changes it, which is rather weird?

What do you mean by changing? Do you have different pixel data in the re-saved image? What is the format of imageData?

[jcageman]

As far as I know it's png8 format. Now that I think about it I can explain that difference. What I've noticed though is that some pixels are slightly different compared to the old code so was wondering if I did anything wrong. It also takes about 40% more kB to store compared to system.drawing. I can't spot the difference with my eyes, but my diff tool tells me

Thanks for noting the clone! Will fix it.

[antonfirsov]

I can't spot the difference with my eyes, but my diff tool tells me

If the input image is in a lossless format and re-saving alters the pixels, that's a bug. If you are absolutely sure about this, can you please open an issue with: (1) input image, (2) resaved image, (3) diff tool output, (4) minimal repro code attached?

It also takes about 40% more kB to store compared to system.drawing

We try to preserve the input image's parameters in a metadata object so we can encode it with the same parameters we decoded. I wonder if we can do better here. Does this happen with the same image where you see the difference?

[antonfirsov]

Wait ... by diff tool you mean some image comparison tool right? Sorry it's clear from your comment that the answer is yes.

[jcageman]

Wait ... by diff tool you mean some image comparison tool right?

Yes, using araxis merge

[jcageman]

I can't spot the difference with my eyes, but my diff tool tells me

If the input image is in a lossless format and re-saving alters the pixels, that's a bug. If you are absolutely sure about this, can you please open an issue with: (1) input image, (2) resaved image, (3) diff tool output, (4) minimal repro code attached?

It also takes about 40% more kB to store compared to system.drawing

We try to preserve the input image's parameters in a metadata object so we can encode it with the same parameters we decoded. I wonder if we can do better here. Does this happen with the same image where you see the difference?

I will validate tomorrow (it's late here)

[jcageman]

test.png

test2.png

test3.png

test4.png

File.WriteAllBytes("D:/test.png", imageData);
using var imageMemoryStream = new MemoryStream(imageData);
using var image = Image.Load(imageMemoryStream);
image.SaveAsPng("D:/test2.png");
image.Mutate(x => x.BackgroundColor(target));
image.SaveAsPng("D:/test3.png");
using MemoryStream outputMemoryStream = new MemoryStream();
image.SaveAsPng(outputMemoryStream);
File.WriteAllBytes("D:/test4.png", outputMemoryStream.GetBuffer());
return outputMemoryStream.GetBuffer();

the test1.png and test2.png images are slightly different, without any modification. Also note that test2.png is 29kb vs 25kb on test.png.
The interesting part is that test3.png is still only 27kb, but if i save it via MemoryStream is suddenly get's to 54kb.

Edit: i've figured out the issue with test3.png vs test4.png. The GetBuffer() is a very dangerous method, since it returns more than only the contents, but also some reserved capacity, hence you should call ToArray() instead. I think there still is a minor issue with test1.png and test2.png though, since these should be the exact same image.

[JimBobSquarePants]

I've also noticed that simply loading an image and saving it again already changes it, which is rather weird?

Not if the image is indexed. We'll run it through our quantizer which may yield a slightly different result.

In tis case you can see the quantizer shaved off a couple of colors. Those changes are not perceptible.

The main difference is caused by the filtering algorithm used for scanlines.

For palette images the default should be None but we're using Paeth. That is a bug that we should fix. You can workaround it for now by checking the color type on decode and setting the filter type when a palette color type is detected.

For example, the following test code

using (var source = Image.Load<Rgba32>(Path.Combine(inPath, "test.png")))
{
    var metadata = source.Metadata.GetPngMetadata();

    var filter = metadata.ColorType == PngColorType.Palette
        ? PngFilterMethod.None
        : PngFilterMethod.Paeth;

    var encoder = new PngEncoder { FilterMethod = filter };

    source.Save(Path.Combine(outPath, "test.png"), encoder);

}

Gives us the following image that is 21.7KB.

Edit: i've figured out the issue with test3.png vs test4.png. The GetBuffer() is a very dangerous method,

Not dangerous, just not designed for what you are doing.

[jcageman]

Thanks, agree with your statements. What tool are you using for the image comparison? E.g. where to download? looks useful.

[JimBobSquarePants]

It's an old tool called Png Analyzer. Seems like the site went down in the last year but Wayback machine has it.

A bit clunky to use but yeah, really useful.
https://web.archive.org/web/20200717155735/http://wolfgangfellger.de/en/product,4