Rendering Equations with ImageMagick’s Convert

Last October I described my algorithm for rendering LaTeX equations for use on this blog: “Rendering Equations in Movable Type”. For kicks, here are instructions on how to manually run the algorithm. The only thing missing is the middle alignment part of the algorithm.

First create a file, called eqn.tex using the following skeleton. Insert your LaTeX equation code where it says to.

\nonstopmode
\documentclass{article}
\usepackage[T1]{fontenc}
\usepackage{amsmath,amsfonts,amssymb,wasysym,latexsym,marvosym,txfonts}
\usepackage[pdftex]{color}
\pagestyle{empty}
\begin{document}
\fontsize{12}{24}
\selectfont
\color{white}
\pagecolor{black}
\[
%
% EQUATION GOES HERE
%
\]
\end{document}

Next process the file with pdflatex eqn.tex, which will render your equation as eqn.pdf. Now we will use the convert command line tool from the ImageMagick library to turn eqn.pdf into eqn.png.

convert \( -density $DENSITY eqn.pdf -trim +repage \) \
   \( +clone -fuzz 100% -fill $FG -opaque black \) \
   +swap -compose copy-opacity -composite \
   \( +clone -fuzz 100% -fill white -opaque $BG +matte \) \
    +swap -compose over -composite eqn.png

Here DENSITY, FG, and BG are user tunable variables. DENSITY tells convert how many pixels per inch to use when rendering the pdf to a png. This determines how big of a png you have for a given rendered equation. Note that a density of 300 is print quality, 96 is windows monitor standard, and 72 is the mac standard. FG is the color of the equation text in the final image, and BG is the color of the background. Setting BG to none will make the background transparent.

Now for an explanation of the options:

\( -density $DENSITY eqn.pdf -trim +repage \) \ loads the pdf into memore, removes excess background, and saves it into the image stack position 0.

\( +clone -fuzz 100% -fill $FG -opaque black \) \ copies the image at position 0, fills it with the FG color, and saves it at position 1. We clone and fill to ensure that image 1 has the same dimensions as the trimmed image in position 0.

+swap -compose copy-opacity -composite \ uses the black-and-white values in position 0 to determine how transparent pixels are in 1, clears the stack, and saves the result to pos 0. We actually swap positions 0 and 1 to put them in the right order for the -composite operator.

\( +clone -fuzz 100% -fill white -opaque $BG +matte \) \ copies image 0 again and fills it with the BG color, discarding all transparency information.

+swap -compose over -composite eqn.png overlays image 0 onto image 1 and saves result to eqn.png.

And now you have an equation rendered as a png that can be included on any webpage.