1

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

Werner
  • 603,163
Dudi
  • 129
  • Taking a screenshot is not an acceptable solution since the resolution is awful – Dudi May 06 '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 06 '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 06 '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 06 '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 06 '12 at 17:27
  • Given that the output format is SVG, it would seem that the (minor) connection to TeX in this question is completely covered by the more general question How to include SVG diagrams in LaTeX? – Andrew Stacey May 07 '12 at 08:35
  • @AndrewStacey & others: That question is about how to avoid SVG-to-PDF conversion and use SVG with LaTeX directly. It's not a duplicate of this question IMHO because it is about how to obtain the SVG or a different format in the first place. I would say it is borderline-on-topic and can stay with the given self-answer. I can really see that other people also need to get good website images for their LaTeX documents and there are some better LaTeX specific ways to do it instead of using screen-shots which is done for Word which can't do SVG or PDF. – Martin Scharrer May 07 '12 at 09:32
  • Related question on SO: export/convert chart from dojo charting to image. However, this is for the case when you have control over the JavaScript code. – Martin Scharrer May 07 '12 at 09:47

1 Answers1

1

  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){
            alert("Error occurred: " + 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}
qubyte
  • 17,299
Dudi
  • 129
  • 1
    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 07 '12 at 09: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 07 '12 at 10:22