title: Mapbox GL JS: Export map to PNG or PDF?
body: <p>I'm using Mapbox GL JS version 0.32. Is there a way to export the map to a high-res PNG or PDF? </p>
  
  <p>Obviously, I can just screenshot, but it would be nice if there was a more formal way. </p>
  
  <p>I found <a href="https://github.com/vicapow/mapbox-gl-js-export" rel="noreferrer">this repo</a>, but it looks old and isn't clear how it works. </p>
  
  <p>I tried using <a href="https://www.mapbox.com/mapbox-gl-js/api/" rel="noreferrer">the <code>preserveDrawingBuffer</code> option</a>:</p>
  
  <pre><code>var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v9',
      minZoom: 4,
      maxZoom: 14,
      center: [-2.0, 53.3],
      preserveDrawingBuffer: true
  });
  console.log(map.getCanvas().toDataURL());
  </code></pre>
  
  <p>This outputs a long data URL in the console, but copying and pasting it into <a href="http://www.askapache.com/online-tools/base64-image-converter/" rel="noreferrer">a base64 converter</a> just seems to produce an empty image. </p>
  
  <p><strong>UPDATE</strong>: This is my new code, in full:</p>
  
  <pre><code>mapboxgl.accessToken = 'pk.eyXXX';
  var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v9',
      minZoom: 4,
      maxZoom: 14,
      center: [-2.0, 53.3],
      preserveDrawingBuffer: true
  });
  var dpi = 300;
  Object.defineProperty(window, 'devicePixelRatio', {
      get: function() {return dpi / 96}
  });
  
  map.on('load', function () {
      var content = map.getCanvas().toDataURL();
      console.log(content)
  });
  </code></pre>
  
  <p>The output to the console is this: <a href="http://pastebin.com/raw/KhyJkJWJ" rel="noreferrer">http://pastebin.com/raw/KhyJkJWJ</a></p>