Helper functions for manipulating a HTMLCanvasElement
-
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
canvasManipulationglobally<!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>
-
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
-
Change the width and/or height of a CanvasImageSource while preserving the current content
-
Returns
trueif the canvas content has been preserved -
If
scaleDownisfalseand the content is larger than the newly sized canvas, the content will not be preserved
-
Create a DataURL after cropping canvas content of white (transparent, the alpha must be 0) space
-
typeandencoderOptionsarguments are optional, see HTMLCanvasElement.toDataURL() Parameters for options and defaults -
Returns a DataURL
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