@blinkmobile/canvas-manipulation

Helper functions for manipulating a HTMLCanvasElement

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
118Mar 5, 2019Feb 9, 2017Minified + gzip package size for @blinkmobile/canvas-manipulation in KB

Readme

blinkmobile / canvas-manipulation npm AppVeyor Status Travis CI Status

Helper functions for manipulating a HTMLCanvasElement

Installation

  1. Install module via npm

    npm install @blinkmobile/canvas-manipulation --save
    
  2. Load this library and use a build step e.g. webpack or browserify

    const canvasManipulation = require('@blinkmobile/canvas-manipulation')
    // OR
    import canvasManipulation from '@blinkmobile/canvas-manipulation'
    
  3. Or alternatively, load the script straight into a browser and access canvasManipulation globally

    <!DOCTYPE html>
    <html>
    <head>
      <script src="node_modules/@blinkmobile/canvas-manipulation/dist/canvas-manipulation.js"></script>
    </head>
    <body>
      ...
      <script>
        // available via window.canvasManipulation
      </script>
    </body>
    </html>
    

Usage

drawImageCentered(canvas: HTMLCanvasElement, image: CanvasImageSource)
  • Draw a CanvasImageSource onto a HTMLCanvasElement

  • Will center the image onto the canvas if the image is smaller than the canvas

  • Will scale the image down to fit if the image is bigger than the canvas

resize(canvas: HTMLCanvasElement, width: number, height: number, scaleDown: boolean) : boolean
  • Change the width and/or height of a CanvasImageSource while preserving the current content

  • Returns true if the canvas content has been preserved

  • If scaleDown is false and the content is larger than the newly sized canvas, the content will not be preserved

toDataURLCropped(canvas: HTMLCanvasElement, type: string, encoderOptions: number) : string

Example

Check the example directory for a working example or run it yourself:

  1. Install Node 6.x or higher

  2. Clone this repository

    Note: The master branch can contain undocumented or backward compatibility breaking changes. You should checkout the latest release before running the demo.

  3. Install dependencies

    npm install
    
  4. Start demo

    npm start
    

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.