Exporting images

Regardless of what’s displayed in the viewport, you can export the complete drawing, or any subset of the drawing, using getImage().

These examples export your drawing as a PNG in a new window. The conversion to PNG is handled by the built-in canvas function toDataURL(). To learn more about what image formats are available, refer to Mozilla’s canvas element reference.

Exporting the bounding rect of all shapes

<div class="literally export"></div>

<form class="controls export">
  <input type="submit" data-action="export-as-png" value="Export as PNG">
</form>

<script>
  $(document).ready(function() {
    var lc = LC.init(document.getElementsByClassName('literally export')[0]);
    $('.controls.export [data-action=export-as-png]').click(function(e) {
      e.preventDefault();
      window.open(lc.getImage().toDataURL());
    });
  });
</script>

Exporting a specific rectangle

This is probably what you want to do if your image bounds are not infinite.

<div class="literally export-bounded"></div>

<form class="controls export-bounded">
  <input type="submit" data-action="export-as-png" value="Export as PNG">
</form>

<script>
  $(document).ready(function() {
    var imageSize = {width: 200, height: 200};
    var imageBounds = {
      x: 0, y: 0, width: imageSize.width, height: imageSize.height
    };
    var lc = LC.init(
      document.getElementsByClassName('literally export-bounded')[0],
      {imageSize: imageSize}
    );
    $('.controls.export-bounded [data-action=export-as-png]')
      .click(function(e) {
        e.preventDefault();
        window.open(lc.getImage({rect: imageBounds}).toDataURL());
      });
  });
</script>

Exporting to SVG

<div class="literally export-svg"></div>

<form class="controls export-svg">
  <input type="submit" data-action="export-as-svg" value="Export as SVG">
</form>

<script>
  $(document).ready(function() {
    var lc = LC.init(document.getElementsByClassName('literally export-svg')[0]);
    $('.controls.export-svg [data-action=export-as-svg]').click(function(e) {
      e.preventDefault();
      var svgString = lc.getSVGString();
      window.open("data:image/svg+xml;base64," + btoa(svgString));
    });
  });
</script>