CanvasImageSaver

Cool library that let's you save your canvas as a png image on desktop and mobile. It also provides cropping options.

For mobile compatibility you need Cordova and Canvas2ImagePlugin as dependencies.

Installation

Bower

1. Install with bower: bower install canvas-image-saver --save
2. Add script tag in your index.html: <script src="bower_components/canvas-image-saver/dist/canvasImageSaver.min.js"></script>

Npm & Browserify

1. Install with npm: npm install canvas-image-saver --save
2. Require with browserify: var CanvasImageSaver = require('canvas-image-saver');

Parameters

• canvas: The canvas HTML5 element you want to save as image.
• cropOptions: Optional.
• successCallback: Optional.
• errorCallback Optional.
• callbackContext Optional.

Crop Options

• xCropOffset: Optional. The x coordinate where to start clipping.
• yCropOffset: Optional. The y coordinate where to start clipping.
• width: Optional. The width of the clipped image.
• height: Optional. The height of the clipped image.

Usage (Phaser example)

var canvasImageSaver = new CanvasImageSaver(
  this.game.canvas, {
    xCropOffset: 180,
    yCropOffset: 0,
    width: 470,
    height: this.game.height
  }, function (canvas, fileName) {
    // Success callback
  }, function (error) {
    // Error callback
  }, this);

canvasImageSaver.save(filename, directory);

TODO: Refactor using Q promises