0.1.8 • Published 1 year ago
canvas-for-print v0.1.8
@martialgrin/CanvasForPrint
CanvasForPrint is a little library to create and export easily your picture or sequence canvas in high resolution.
- Under construction, some bugs can appears, report them into the issues##Installation
NPM install
npm install canvas-for-printimport CanvasForPrint from "canvas-for-print";CDN install
<link
href="https://unpkg.com/canvas-for-print@latest/dist/canvas-for-print.cjs.css"
rel="stylesheet"
/>
<script src="https://unpkg.com/canvas-for-print@latest/dist/canvas-for-print.umd.js"></script>initialisation
const cPrint = CanvasForPrint({
...settings,
});
cPrint.create();settings table
| type | label | Description |
|---|---|---|
| number | width | width of your desired canvas || default: 210 |
| number | height | height of your desired canvas || default: 297 |
| number | ppi | resolution of the canvas in ppi || default: 300 |
| string | unit | unit of measure of the canvas || default: "mm" |
| DOM Element | container | container of your canvas || default: document.body |
| string | id | id of your canvas || default: "canvas-for-print" |
| string | context | context of your canvas || default: "2d" |
| string | fileName | fileName of your file when you save it || default: "CanvasForPrint" |
| string | mode | mode for the saving file || default: "picture" |
| object | recordingFrames | !only for sequence mode starting & ending recording frame of the canvas || default: {start:0, end: 100, current: 0 } |
| boolean | p5Mode | turn to true if you use p5 || default: false |
| boolean | GUI | To display the GUI || default: true |
##Current Features
####Save Canvas
save frame or sequence in png format with transparent support
cPrint.saveCanvas();####context get the context of the canvas
const ctx = cPrint.ctx;####Saving Mode
Mode supported
cPrint.setMode("picture");save juste one frame of your canvas..
cPrint.setMode("sequence");save a sequence related to recordingFrames settings.
####Setting fileName get the context of the canvas
cPrint.setFileName("your-filename");Listeners
A set of listeners to available
cPrint.on("resize",${your-code});when canvas is resized
cPrint.on("frameSaved", ${your-code});when canvas is saved, use this to call update function on sequence mode
cPrint.on("saved", ${your-code});when all frames requested are saved
cPrint.on("startSaving", ${your-code});before entering in saving mode