Escapes.js

                                            _)

_ \ | | ` | __ \ _ \ | | | _/ _ \ ( ( | | | / _ \ | _
_| ____/ _| _,_| ./ _| ____/ _) | ____/ _| ___/

escapes.js is a small JavaScript / Canvas library for rendering ANSI art. It has no dependencies, but it integrates nicely with jQuery.

Demo: https://atdt.github.io/escapes.js/

Example:

  escapes('path/to/file.ans', function () {
      document.body.appendChild(this);
  });

Example (with jQuery):

  escapes('path/to/file.ans', function () {
      $(this).appendTo('body');
  });

Within the callback, the value of "this" is set to a canvas element containing the rendered ANSI. The element is augmented with a couple of useful methods:

this.toImageTag()

    Creates an image tag with a PNG of the ANSI.

this.toDownloadURL()

    Returns a string URL containing the rendered ANSI as a base64-encoded
    PNG file, with a MIME type of "image/octet-stream". If you set this URL
    as the href attribute of a link tag, clicking on it will open a "Save
    File..." dialog.

escapes() takes a configuration object as an optional third parameter. You can use it to make the default background color transparent by passing in {transparent: true}.

If you're using escapes.js with jQuery, you can invoke the library as $.ansiRender([url]). This returns a jQuery.Deferred object:

  $.ansiRender('path/to/file.ans').done(function () {
        // do stuff
  });

Thie chief advantage of this approach is that it allows you to synchronize ANSI rendering with other asyncronous operations (using Deferred.when, for example). You can read more about jQuery.Deferred here:

http://api.jquery.com/category/deferred-object/

For lots & lots of beautiful ANSI art, check out http://sixteencolors.net/