What is the reason why the generated image is not clear?

[cethink]

[stefannikolei]

Without the source image and your code no one can help you.

[cethink]

I will add code later.

[cethink]

This is the code.

using SixLabors.Fonts;
using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Drawing.Processing;
using SixLabors.ImageSharp.Formats.Jpeg;
using SixLabors.ImageSharp.Formats.Png;
using SixLabors.ImageSharp.PixelFormats;
using SixLabors.ImageSharp.Processing;

namespace Common
{
    public class ValidateCodeHelper
    {
        public static string CreateValidateString()
        {
            string chkCode = string.Empty;
            //验证码的字符集，去掉了一些容易混淆的字符
            char[] character = { '2', '3', '4', '5', '6', '8', '9', 'a', 'd', 'e', 'f', 'h', 'k', 'm', 'n', 'r', 'x', 'y', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R', 'S', 'T', 'W', 'X', 'Y' };
            Random rnd = new Random();
            //生成验证码字符串
            for (int i = 0; i < 4; i++)
            {
                chkCode += character[rnd.Next(character.Length)];
            }
            return chkCode;
        }

        public static byte[] CreateValidateCodeBuffer(string chkCode)
        {
            int codeW = 90;
            int codeH = 30;
            int fontSize = 24;
            Random rnd = new Random();

            //颜色列表，用于验证码、噪线、噪点
            Color[] color = { Color.Black, Color.Red, Color.Blue, Color.Green, Color.Brown, Color.DarkBlue };
            //字体列表，用于验证码
            string[] font = { "Times New Roman", "Verdana", "Arial", "Impact" };

            //创建画布
            using Image img = new Image<Rgba32>(codeW, codeH);

            img.Mutate(ctx =>
            {
                //白底背景
                ctx.Fill(Color.White);

                //画验证码
                for (int i = 0; i < chkCode.Length; i++)
                {
                    string fnt = font[rnd.Next(font.Length)];
                    Font ft = SystemFonts.CreateFont(fnt, fontSize);
                    Color clr = color[rnd.Next(color.Length)];
                    ctx.DrawText(chkCode[i].ToString(), ft, clr, new PointF(18 * i + 10, rnd.Next(1, 2)));
                }

                //画干扰线
                for (int i = 0; i < 2; i++)
                {
                    int x1 = rnd.Next(codeW);
                    int y1 = rnd.Next(codeH);
                    int x2 = rnd.Next(codeW);
                    int y2 = rnd.Next(codeH);
                    Color clr = color[rnd.Next(color.Length)];
                    var p1 = new PointF(x1, y1);
                    var p2 = new PointF(x2, y2);
                    var pen = new Pen(clr, 1);
                    ctx.DrawLines(pen, p1, p2);
                }

                //画噪点
                for (int i = 0; i < 24; i++)
                {
                    int x = rnd.Next(codeW);
                    int y = rnd.Next(codeH);
                    Color clr = color[rnd.Next(color.Length)];
                    var p1 = new PointF(x, y);
                    var p2 = new PointF(p1.X + 0.5f, p1.Y + 0.5f);
                    var pen = Pens.Dot(clr, 1);
                    ctx.DrawLines(pen, p1, p2);
                }

                //改变大小
                //ctx.Resize(img.Width * 4, img.Height * 4);
            });

            using MemoryStream ms = new MemoryStream();

            //JpegEncoder encoder = new JpegEncoder()
            //{
            //    //标准中定义的0到100之间的质量值。默认值为75。
            //    //通过减少Quality松散的信息，从而减小文件大小。
            //    Quality = 100
            //};

            //img.SaveAsJpeg(ms, encoder);

            PngEncoder encoder = new PngEncoder()
            {
                CompressionLevel = PngCompressionLevel.NoCompression,
                BitDepth = PngBitDepth.Bit16,
                ColorType = PngColorType.RgbWithAlpha
            };

            img.SaveAsPng(ms, encoder);

            return ms.ToArray();
        }
    }
}

[cethink]

You're confusing compression with quality here. Compressions means. How big is this file once encoded. It does not affect the quality of the output in anyway.

So, I mean how to get high quality image, looks more clear. thx.😜

[tocsoft]

@cethink its not a secret its all related to DPI.

Macs generally have a really high DPI monitors, as such you need to draw your images with more pixels to not have the display invent pixel data as it scales the image up when rendering.

DPI itself isn't really a major thing in image manipulation at the pixel level as a pixel is a pixel afterall where as DPI is a rendering concern (print/monitor), this is why others are saying it looks fine to them because they are not looking at it as the same DPI as you.

The only thing we really do with regards DPI is passing through some meta data (with our default set as 96) so to fix your issue you are going to want to do 2 things,

1. Draw your images larger (simple as that increase the number of pixels so your OS/display stops inventing them).
2. Set the image.Metadata.HorizontalResolution & image.Metadata.VerticalResolution values higher (to match this increased pixel size), doing this alone is not going to be enough as you still only have so many pixels in your image... you might be able to skip this step.

[cethink]

---

@tocsoft Seems useful. I multiply the size of the generated image by 4, and then use css to reduce it by 4 times, it looks good! Thanks a lot 👍

There are two small questions(If you have no time, you don't need to answer):

1. The image.Metadata.HorizontalResolution & image.Metadata.VerticalResolution it seems to have no effect.
2. When I use ctx.Resize(img.Width / 4, img.Height / 4); to reduce the image, it not clear again. Like this:
   

---

The modified code:

using SixLabors.Fonts;
using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Drawing.Processing;
using SixLabors.ImageSharp.Formats.Jpeg;
using SixLabors.ImageSharp.Formats.Png;
using SixLabors.ImageSharp.PixelFormats;
using SixLabors.ImageSharp.Processing;

namespace Common
{
    public class ValidateCodeHelper
    {
        public static string CreateValidateString()
        {
            string chkCode = string.Empty;
            //验证码的字符集，去掉了一些容易混淆的字符
            char[] character = { '2', '3', '4', '5', '6', '8', '9', 'a', 'd', 'e', 'f', 'h', 'k', 'm', 'n', 'r', 'x', 'y', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R', 'S', 'T', 'W', 'X', 'Y' };
            Random rnd = new Random();
            //生成验证码字符串
            for (int i = 0; i < 4; i++)
            {
                chkCode += character[rnd.Next(character.Length)];
            }
            return chkCode;
        }

        public static byte[] CreateValidateCodeBuffer(string chkCode)
        {
            int codeW = 90 * 4;//搞大点，再用css缩小，更清晰
            int codeH = 30 * 4;
            int fontSize = 24 * 4;
            Random rnd = new Random();

            //颜色列表，用于验证码、噪线、噪点
            Color[] color = { Color.Black, Color.Red, Color.Blue, Color.Green, Color.Brown, Color.DarkBlue };
            //字体列表，用于验证码
            string[] font = { "Times New Roman", "Verdana", "Arial", "Impact" };

            //创建画布
            using Image img = new Image<Rgba32>(codeW, codeH);

            //貌似无效，高DPI，默认96
            img.Metadata.HorizontalResolution = 192;
            img.Metadata.VerticalResolution = 192;

            img.Mutate(ctx =>
            {
                //白底背景
                ctx.Fill(Color.White);

                //画验证码
                for (int i = 0; i < chkCode.Length; i++)
                {
                    string fnt = font[rnd.Next(font.Length)];
                    Font ft = SystemFonts.CreateFont(fnt, fontSize);
                    Color clr = color[rnd.Next(color.Length)];
                    ctx.DrawText(chkCode[i].ToString(), ft, clr, new PointF(20 * 4 * i + 24, rnd.Next(1, 2)));
                }

                //画干扰线
                for (int i = 0; i < 4; i++)
                {
                    int x1 = rnd.Next(codeW);
                    int y1 = rnd.Next(codeH);
                    int x2 = rnd.Next(codeW);
                    int y2 = rnd.Next(codeH);
                    Color clr = color[rnd.Next(color.Length)];
                    var p1 = new PointF(x1, y1);
                    var p2 = new PointF(x2, y2);
                    var pen = new Pen(clr, rnd.Next(2, 8));
                    ctx.DrawLines(pen, p1, p2);
                }

                //画噪点
                for (int i = 0; i < 96; i++)
                {
                    int x = rnd.Next(codeW);
                    int y = rnd.Next(codeH);
                    Color clr = color[rnd.Next(color.Length)];
                    var p1 = new PointF(x, y);
                    var p2 = new PointF(p1.X + 2f, p1.Y + 2f);
                    var pen = Pens.Dot(clr, 4);
                    ctx.DrawLines(pen, p1, p2);
                }

                //不要改变大小，不然又不清晰了
                //ctx.Resize(img.Width / 4, img.Height / 4);
            });

            using MemoryStream ms = new MemoryStream();

            //JpegEncoder encoder = new JpegEncoder()
            //{
            //    //标准中定义的0到100之间的质量值。默认值为75。
            //    //通过减少Quality松散的信息，从而减小文件大小。
            //    Quality = 100
            //};
            //img.SaveAsJpeg(ms, encoder);

            //png更清晰些
            PngEncoder encoder = new PngEncoder()
            {
                CompressionLevel = PngCompressionLevel.NoCompression,
                BitDepth = PngBitDepth.Bit16,
                ColorType = PngColorType.RgbWithAlpha
            };
            img.SaveAsPng(ms, encoder);

            return ms.ToArray();
        }
    }
}

[JimBobSquarePants]

1. The image.Metadata.HorizontalResolution & image.Metadata.VerticalResolution it seems to have no effect.
2. When I use ctx.Resize(img.Width / 4, img.Height / 4); to reduce the image, it not clear again. Like this:

1. Not everything is DPI scaling aware so it could be ignored.
2. You're making it small again and the OS is bitmap scaling the output.

[cethink]

1. The image.Metadata.HorizontalResolution & image.Metadata.VerticalResolution it seems to have no effect.
2. When I use ctx.Resize(img.Width / 4, img.Height / 4); to reduce the image, it not clear again. Like this:

1. Not everything is DPI scaling aware so it could be ignored.
2. You're making it small again and the OS is bitmap scaling the output.

I see, thanks😁