This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@blinkmobile/canvas-manipulation

1.0.1 • Public • Published

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
    

Readme

Keywords

Package Sidebar

Install

npm i @blinkmobile/canvas-manipulation

Weekly Downloads

153

Version

1.0.1

License

MIT

Last publish

Collaborators

  • aaronroworth
  • blinkmobile-admin
  • kizaonline
  • mymattcarroll
  • simon_marklar