@blinkmobile/canvas-manipulation v1.0.1
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 preservedIf
scaleDown
isfalse
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
andencoderOptions
arguments are optional, see HTMLCanvasElement.toDataURL() Parameters for options and defaultsReturns 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