# How to obtain a high quality image from a web browser source [closed]

How to create high quality images from a Javascript/Dojo image presented in a browser which can be used by LaTeX?

• Taking a screenshot is not an acceptable solution since the resolution is awful – Dudi May 6 '12 at 16:28
• I don't understand. Do you want to reproduce the image in the (La)TeX environment? Are you speaking of images in general or particular ones (say charts, or line graphs, or flow diagrams, or...)? Please clarify. – Werner May 6 '12 at 16:42
• Bit difficult to help without some more context. Are you a Dojo developer or consumer? Does the website of interest suppress Right-click-save-image-as? If the website can't present you with a high-quality image, no TeXing on earth is going to make you one. – Brent.Longborough May 6 '12 at 16:51
• I'm loath to do your job for you, so please in future make your questions more complete. It seems that right click does not work (try it at this example. The framework in question constructs vector graphics onto the webpage with javascript. I'm not sure what is doing the job of rendering, perhaps an HTML5 canvas, or some CSS trickery. – qubyte May 6 '12 at 17:24
• In chrome, inspect element shows that the framework has chosen to render with SVG. It should be fairly simple to copy the SVG code into something like Inkscape and then save the result as a PDF. – qubyte May 6 '12 at 17:27

1. obtain the svg rendered by the browser, As Mark S. Everitt pointed out this can be done in Chrome (and Firefox) by using inspect element. In addition if you are the (DOJO) developer you can use the following code:

function(surface){
dojox.gfx.utils.toSvg(surface,true).then(
function(svg){
console.log(svg);
},
function(error){
}
);
};


Using the code the svg is now displayed on the browser console,

2. Copy the svg into a text file and save it with svg as the extension. (say foo.svg)
3. Transform the svg file to an eps format (say foo.eps). This can be done by using a free tool such as Inkscape. Here you should specify the resolution. I typically use the maximum which is 1440.
4. If you are using PDFLatex you might not be able to use eps format, so again using a free tool such as GIMP, (here you can again specify a resolution once more) save the file in a png format. Now just use the regular code:

\begin{figure}
\centering
\includegraphics{foo}
\caption{myfoo}
\end{figure}

• You can use inkscape --export-pdf file.pdf file.svg to generate a PDF file from the SVG file, so you can use it with pdflatex. I would not recommend to use (E)PS and the DVI-mode latex for new document, as long you don't have a good reason for it. – Martin Scharrer May 7 '12 at 9:26
• If you choose PDF over EPS then point three should be a non-issue, since the output can be a pure vector graphic. This is also possible in EPS, but difficult if the SVG has blends or transparency. As Martin says, avoid EPS. – qubyte May 7 '12 at 10:22