Poor exported PNG quality and text cutting

[troelschristensen]

Thank you so much for this great extension.

First issue
My text gets cutted. Se the numbers in the images.

Next "issiue"
I have installed the extension on my vb.net server and I am linking to a function (called latex2png - see below) in the code:

Shared Function latex2png(latex As String) As MemoryStream
        Dim parser = New TexFormulaParser()
        Dim formula = parser.Parse(latex)
        formula.GetRenderer(TexStyle.Script, 15.0, "Arial")

        Dim pngBytes = formula.RenderToPng(15.0, 0.0, 0.0, "Arial")
        Dim latexpng As New MemoryStream(pngBytes)

        Return latexpng
    End Function

Everything is working great, but sadly the quality of the image could be much better. Is there any way to get a higher quality of the png image that is created? Hope you can help me.

Seems like making the scale bigger is better. But the image gets to large in the end.

SCALE 12

SCALE 15

SCALE 25

BTW. I am writing the code in vb.net in aspx, and I am a novice. So go easy on me, when explaining. :)

Kind regards
Troels Christensen

[B3zaleel]

At the moment, I can't guarantee that this would be a good solution (because we're still working on improving the rendering quality), but you could try it out if you want to.

//The code sample below is in "WpfMath/TexRenderer.cs
//If the method you're using calls the method below, the x and y values should be enough to prevent the text from getting cut (I could suggest 3.5 for both x and y).
public BitmapSource RenderToBitmap(double x, double y)
        {
            var visual = new DrawingVisual();
            using (var drawingContext = visual.RenderOpen())
            {
                //this.Render(drawingContext, x, y);
                drawingContext.DrawGeometry(Brushes.Black,new Pen(Brushes.Black,0.7),this.RenderToGeometry(x, y));
            }

            var width = (int)Math.Ceiling(2*x+this.RenderSize.Width);
            var height = (int)Math.Ceiling(2*y+this.RenderSize.Height);
            var bitmap = new RenderTargetBitmap(width, height, 96, 96, PixelFormats.Default);
            bitmap.Render(visual);

            return bitmap;
        }

[troelschristensen]

Thank you for your quick response, @B3zaleel.

Sadly it's not possible for me to use this code. I'm coding for a webpage. I'm using Visual Studio when coding and can't see the files. Installed Wpf-math as a socalled Nuget package. I'm coding in vb.net. Tried to convert your code, but I cant get it to work. But thanks anyway.

I'm also using a memorystream, because I'm not allowed/it's not possible to use an image. It's working. But the image quality is not good.

calling the latex2png function like this:
latex2png("\vec{AB} = 0_E ")

Shared Function latex2png(latex As String) As MemoryStream
        Dim parser = New TexFormulaParser()
        Dim formula = parser.Parse(latex)
        formula.GetRenderer(TexStyle.Display, 15.0, "Arial")
        Dim pngBytes = formula.RenderToPng(15, 0.0, 0.0, "Arial")
        Dim latexpng As New MemoryStream(pngBytes)
        Return latexpng
    End Function

Kind regards.
Troels

The text does not get cut off, when using a scaling factor below 16.

[B3zaleel]

If you you're using and have Visual Studio 2017 (version 15.7.5+) for coding, just click the Clone button, download the files, extract them at your working folder and you have the complete project with you(the built version is what you get from nuget, but you can't edit the files). If you try to build it, there won't be bugs waiting for you. You won't be able to convert the code if you don't have the project files.
See the attached file. Once you extract it, you would see the same ".dll" file that the nuget PM gives you.
WpfMath-dotnet40.zip

[troelschristensen]

Ok. Thank you again. I’ll try to look into it. For now I have fixed it. I use scale 50 first and then shrink it afterwards. Images now look much better. I use wpf-math together with Gembox extension in VS2017.

[troelschristensen]

And here is the quality of the images now.

Much better. So if a future version of wpf-math could bring support for quality/dpi I think it would be nice.

[ForNeVeR]

@troelschristensen one of the quality solutions for now would be to use SVG instead of PNG. Take a look at our example project: it has the stuff to render the formula into SVG image, it will scale much better.

I was able to reproduce your "cutting" issue and I'm investigating it.

[ForNeVeR]

Alright, after some additional research I have the working prototype. There're two problems:

1. "Text cutting": with default settings, some of the letter elements are sometimes drawn out of bounds of our images. See image attached (this is SVG, but it has the same problems anyway):
   
   Solution: Fix the images by adding a TranslateTransform to them if they're out of bounds.
2. Images generated by TexRenderer.RenderToBitmap have poor resolution by default (something like 96 DPI because that's the default resolution for "Display Independent Pixels").
   Solution: Allow the users to define their own resolution instead of the default one.

[troelschristensen]

@ForNeVeR That sounds great. Hope that I Can save as svg and not png. But I can’t get to the sample projekt. The link is simply not working. 🤷‍♂️ Great that you found the cutting issue. I’ll try to use the translateTransform, but right now I don’t know, how I would do that.🤷‍♂️

_{Sent with GitHawk}

[B3zaleel]

@ForNeVeR Instead of using a TranslateTransform, why can't the origin be changed? It could prevent the text from getting cut.

[B3zaleel]

@troelschristensen You can save as svg without the sample project.
For example:

    Dim renderer = formula.GetRenderer(TexStyle.Script, 15.0, "Arial")
    Dim geometry = renderer.RenderToGeometry(3.5, 3.5)
    Dim converter = new SVGConverter()
    Dim svgPathText = converter.ConvertGeometry(geometry)
    Dim svgText = AddSVGHeader(svgPathText)
    Using  writer As New System.IO.StreamWriter(New IO.FileStream("c:\test.svg", mode:=IO.FileMode.Create))
              writer.WriteLine(svgText)
    End Using

[ForNeVeR]

@B3zaleel well the origin could be changed, too, but for now there's another issue because our PNG rendering code was ignoring the user-provided origin. I'll fix that, too 😄

[troelschristensen]

@B3zaleel Thank you. I’ll try that.👍 Sounds great, @ForNeVeR 👌

_{Sent with GitHawk}

[B3zaleel]

@ForNeVeR That's why in my first code sample here, I multiplied the origin by two and added it to the width, so that the end doesn't get taken out.

[ForNeVeR]

FYI, the changes were published in WPF-Math 0.6.0.