@blinkmobile/canvas-manipulation NPM

blinkmobile / canvas-manipulation

Helper functions for manipulating a HTMLCanvasElement

Installation

Install module via npm

npm install @blinkmobile/canvas-manipulation --save

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'

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`

Create a DataURL after cropping canvas content of white (transparent, the alpha must be 0) space
type and encoderOptions arguments are optional, see HTMLCanvasElement.toDataURL() Parameters for options and defaults
Returns a DataURL

Example

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

Install Node 6.x or higher
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.
Install dependencies
```
npm install
```
Start demo
```
npm start
```

HTML5 browser canvas

@infinitebrahmanuniverse/nolb-_bli @everything-registry/sub-chunk-131 @blinkmobile/bm-plugin-forms-angularjs

1.0.1

9 years ago

1.0.0

9 years ago