Saving DrawingVisual to an image file with a given DPI

Question

I have got a WPF application, and I would like to save a Canvas to a file with a correct DPI value. The Canvas size is the real physical size, eg. 20x10 cm, at 300 DPI, so it\'s

Answer 1

I tried to apply DPI scaling to the DrawingVisual, but it produced less image quality. :( Also I tried to set the canvas to 756x378 (the 96 DPI size), then set the RenderTargetBitmap to 2362x1181 and 300 DPI, but that produced less image quality too. So, it seems any downscale then upscale or upscale then downscale are not the best solution. The DrawingVisual must be in the final render size.

Answer 2

The following method saves a UIElement to a JPEG file with the specified DPI value:

public static void SaveElement(UIElement element, double dpi, string path)
{
    var visual = new DrawingVisual();
    var width = element.RenderSize.Width;
    var height = element.RenderSize.Height;

    using (var context = visual.RenderOpen())
    {
        context.DrawRectangle(new VisualBrush(element), null,
            new Rect(0, 0, width, height));
    }

    var bitmap = new RenderTargetBitmap(
        (int)(width * dpi / 96), (int)(height * dpi / 96),
        dpi, dpi, PixelFormats.Default);
    bitmap.Render(visual);

    var encocer = new JpegBitmapEncoder();
    encocer.Frames.Add(BitmapFrame.Create(bitmap));

    using (var stream = File.OpenWrite(path))
    {
        encocer.Save(stream);
    }
}

Alternatively, apply the DPI scaling to the DrawingVisual:

public static void SaveElement(UIElement element, double dpi, string path)
{
    var visual = new DrawingVisual();
    var width = element.RenderSize.Width;
    var height = element.RenderSize.Height;

    using (var context = visual.RenderOpen())
    {
        context.DrawRectangle(new VisualBrush(element), null,
            new Rect(0, 0, width / dpi * 96, height / dpi * 96));
    }

    var bitmap = new RenderTargetBitmap(
        (int)width, (int)height, dpi, dpi, PixelFormats.Default);
    bitmap.Render(visual);

    var encocer = new JpegBitmapEncoder();
    encocer.Frames.Add(BitmapFrame.Create(bitmap));

    using (var stream = File.OpenWrite(path))
    {
        encocer.Save(stream);
    }
}

Answer 3

It seems the solution is the Bitmap SetResolution, after all. I tested it, and it looks like not affect the image quality after the JpegBitmapEncoder()! And the image resolution is untouched, keep the metadata, only the DPI will change!

Helped this documentation: https://docs.microsoft.com/en-us/dotnet/framework/winforms/advanced/how-to-set-jpeg-compression-level

JpegBitmapEncoder encoder = new JpegBitmapEncoder();
encoder.QualityLevel = 100;
BitmapFrame bFrame = BitmapFrame.Create(rtb, null, meta, icc);
encoder.Frames.Add(bFrame);

using (var stream = new MemoryStream())
{
    encoder.Save(stream);

    using (var bmpOutput = new System.Drawing.Bitmap(stream))
    {
        System.Drawing.Imaging.ImageCodecInfo myEncoder = GetEncoder(ImageFormat.Jpeg); 

        var encoderParameters = new System.Drawing.Imaging.EncoderParameters(1);
        encoderParameters.Param[0] = new System.Drawing.Imaging.EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 100L);

        bmpOutput.SetResolution(300.0f, 300.0f);
        bmpOutput.Save(filePath, myEncoder, encoderParameters);
    }
}