📷 – Save canvas as png image on cordova or desktop.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
.gitignore
LICENSE
README.md
bower.json
gulp.config
gulpfile.js
package.json

README.md

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