While the new genome browser (JBrowse) implemented at WormBase has several advantages, like faster browsing and a faceted track selector, it does lack a few features from the venerable GBrowse instance that has been at WormBase for many years.  While we and the JBrowse developers are working on addressing those minor shortcomings, this article is about how to circumvent one of those issues now.  

JBrowse lacks the ability to make a high resolution image like GBrowse.  While taking a screenshot can sometimes result in an acceptable image (for example, Macs with a retina display work pretty well), the result is not always suitable for publication or putting on a poster.  The method described here still does not allow for making an SVG image, but it does allow for higher quality PNG images than just taking a screenshot and also allows for the creation of a PDF document with the image in it.  Unfortunately, this method requires downloading a tool where we must edit one of the source files and then execute it on the command line.  While this is a little bit of a hassle, once it is set up, creating screenshots is quite easy.

Another nice application of this tool is taking very tall screenshots, where you have deep sequencing tracks or lots of tracks that scroll off the screen.  Phantomjs doesn’t care how big/long/tall the page is and will make the image regardless of how it would look in a real browser.

Of course, if you’d like help doing this, feel free to contact me directly, or the WormBase help desk. Here’s how to do it:

1. Download phantomjs and extract the zip file. Go to http://phantomjs.org/download.html and download the zip file for your platform.  Extract the file if it wasn’t extracted automatically when downloading.  
2. Edit examples/rasterize.js (add ‘//’ to first line). Use a text editor (not a word processor) to open the rasterize.js file in the examples directory. The very first line in the file is “use strict”; add two forward slashes at the beginning of the line, so that it looks like this:
   //”use strict”;
3. Go to JBrowse on WormBase to get the view you want; copy the url Open JBrowse from WormBase and select tracks and navigate to the region you want.  Select and copy the url of this view in the location bar of your web browser and save it. If you want to make an image without the WormBase header and footer sections, press the “full page” button in the upper right corner of the page to get a genome browser window without them.
4. Run Phantomjs on the command line. Open a terminal/command window and change directories to the newly created phantomjs directory (e.g., cd phantomjs-2.1.1-macosx).  The command to make the image looks like this:

   bin/phantomjs examples/rasterize.js ‘url’ filename_to_create optional_arguments

   (you might need to scroll to the right to see the entire command) where the url is the one you copied in step 3.  It must be placed in single quotes.  The name of the image file to create can be anything, but it must end in either .png or .pdf, which will serve as a flag to indicate what kind of file to create.  If you specify pdf, you can specify the page size (like ‘Letter” or “A4”) as an optional argument.  If you specify png, you must also specify the dimensions of the image to make.  While rasterize.js supports many ways of specifying dimensions, perhaps the most straight-forward is to use pixels, like this: '4800px*2600px'.  Additionally, if you specify png, you should also specify a “scale factor” as the last optional argument, which is how much the final image will be “zoomed-in” by.  Values like 2 or 4 will typically work well.  Higher values will result in higher resolution images, but of a smaller “window” of the page (meaning that if you want to make a very high resolution image, you’ll want to make the dimensions quite large as well as making the scale factor large; you’ll probably want to experiment to get exactly what you want).  The final version of the command should look something like this:

   bin/phantomjs examples/rasterize.js 'http://www.wormbase.org/tools/genome/jbrowse/full.html?data=data%2Fc_elegans_PRJNA13758&loc=X%3A14742610..14744961&tracks=Curated_Genes%2CCurated%20Genes%20(noncoding)%2CBinding%20Sites%20AMA-1%20(GFP%20ChIP)%2CBinding%20Sites%20DAF-16%20(GFP%20ChIP)%2CAdult%20spe-9%20Day%208&highlight=' wormbase.jbrowse.png '4800px*2600px' 4

   (you might need to scroll to the right to see the entire command) Which will make a good quality image of let-7 gene along with some (slightly misaligned) modENCODE data.
   The resulting image looks like this:
   

   

   higher-res screenshot of JBrowse

   Versus a normal screenshot from my MacBook Pro laptop:
   

   

   Normal resolution screenshot from a laptop.

5. If you get “this may take a while”, edit rasterize.js to increase timeout. JBrowse can take a while to load the C. elegans browser, and it may not finish loading before phantomjs wants to make the image.  To make it wait, you can change the timeout in rasterize.js.  Open this file again in a text editor and at the bottom of the file, you’ll see a section of code that looks like this:

} else {
      window.setTimeout(function () {
        page.render(output);
        phantom.exit();
      }, 200);
    }
  });
}

Change the 200 (which is milliseconds) to something much bigger.  For C. elegans when I’m loading BAM tracks, I make it 500000 (about 8 minutes, which is probably overkill).  For other genomes, the value will still probably need to be bigger than 200, but not huge, perhaps 2-4000.  Save rasterize.js and try again.

Finally, I should note that this tool, Phantomjs, is not developed by anybody associated with WormBase or JBrowse, but it is a very useful tool for not only taking screenshots of any web page but many other functions as well.  Explore the examples directory for more (duh) examples of what you can do with it.  Much thanks to the JBrowse and Apollo developers for pointing this tool out to me, and especially to Colin Diesh for writing this section of the JBrowse documentation for getting me started.