|
1 | | -# canvasConstructor |
2 | | - |
3 | | -[](https://www.codacy.com/app/kyranet/canvasConstructor?utm_source=github.com&utm_medium=referral&utm_content=kyranet/canvasConstructor&utm_campaign=badger) |
4 | | - |
5 | | -A ES6 function for node-canvas with built-in functions and chained methods. |
6 | | - |
7 | | -How to use it: |
8 | | - |
9 | | -```js |
10 | | -const Canvas = require('canvasConstructor'); |
11 | | - |
12 | | -new Canvas(300, 300) |
13 | | - .setColor('#AEFD54') |
14 | | - .fillRect(5, 5, 290, 290) |
15 | | - .setColor('#FFAE23') |
16 | | - .setTextFont('28px Impact') |
17 | | - .addText('Hello World!', 130, 150) |
18 | | - .toBuffer(); |
19 | | -``` |
20 | | - |
21 | | -- That will create a canvas with size of 300 pixels width, 300 pixels height. |
22 | | -- Set the colour to #AEFD54 |
23 | | -- Draw a rectangle with the previous colour, covering all the pixels from (5, 5) to (290 + 5, 290 + 5) |
24 | | -- Set the colour to #FFAE23 |
25 | | -- Set the font size to 28 pixels with font Impact. |
26 | | -- Write the text 'Hello World!' in the position (130, 150) |
27 | | -- Return a buffer. |
28 | | - |
29 | | -Now, let's suppose we want to add images. I'd recommend [fs-nextra](https://github.com/bdistin/fs-nextra), by BDISTIN, it requires Node.js 8.1.0 to work (it promisifies the async fs methods with `Util.promisify()`), it's a dependency-free and lightweight package that provides support for **atomic operations**. |
30 | | - |
31 | | -```js |
32 | | -const Canvas = require('canvasConstructor'); |
33 | | -const fsn = require('fs-nextra'); |
34 | | - |
35 | | -async function createCanvas() { |
36 | | - const image = await fsn.readFile('./images/kitten.png'); |
37 | | - |
38 | | - new Canvas(300, 400) |
39 | | - .addImage(image, 0, 0, 300, 400) |
40 | | - .setColor('#FFAE23') |
41 | | - .setTextFont('28px Impact') |
42 | | - .setTextAlign('center') |
43 | | - .addText('Kitten!', 150, 370) |
44 | | - .toBuffer(); |
45 | | -} |
46 | | -``` |
47 | | - |
48 | | -- That will create a canvas with size of 300 pixels width, 400 pixels height. |
49 | | -- Draw an image, given a Buffer (the image from the images folder). |
50 | | -- Set the colour to #FFAE23 |
51 | | -- Set the font size to 28 pixels with font Impact. |
52 | | -- Set the text alignment to center. |
53 | | -- Write the text 'Kitten!' in the position (150, 370) |
54 | | -- Return a buffer. |
55 | | - |
56 | | -And now, you have created an image with a kitten in the background and some centered text in the bottom of it. |
| 1 | +# canvasConstructor |
| 2 | +A ES6 function for node-canvas with built-in functions and chained methods. |
| 3 | + |
| 4 | +How to use it: |
| 5 | + |
| 6 | +```js |
| 7 | +const { Canvas } = require('canvasConstructor'); |
| 8 | + |
| 9 | +new Canvas(300, 300) |
| 10 | + .setColor('#AEFD54') |
| 11 | + .fillRect(5, 5, 290, 290) |
| 12 | + .setColor('#FFAE23') |
| 13 | + .setTextFont('28px Impact') |
| 14 | + .addText('Hello World!', 130, 150) |
| 15 | + .toBuffer(); |
| 16 | +``` |
| 17 | + |
| 18 | +- That will create a canvas with size of 300 pixels width, 300 pixels height. |
| 19 | +- Set the colour to #AEFD54 |
| 20 | +- Draw a rectangle with the previous colour, covering all the pixels from (5, 5) to (290 + 5, 290 + 5) |
| 21 | +- Set the colour to #FFAE23 |
| 22 | +- Set the font size to 28 pixels with font Impact. |
| 23 | +- Write the text 'Hello World!' in the position (130, 150) |
| 24 | +- Return a buffer. |
| 25 | + |
| 26 | +Now, let's suppose we want to add images. I'd recommend [fs-nextra](https://github.com/bdistin/fs-nextra), by BDISTIN, it requires Node.js 8.1.0 to work (it promisifies the async fs methods with `Util.promisify()`), it's a dependency-free and lightweight package that provides support for **atomic operations**. |
| 27 | + |
| 28 | +```js |
| 29 | +const { Canvas } = require('canvasConstructor'); |
| 30 | +const fsn = require('fs-nextra'); |
| 31 | + |
| 32 | +async function createCanvas() { |
| 33 | + const image = await fsn.readFile('./images/kitten.png'); |
| 34 | + |
| 35 | + new Canvas(300, 400) |
| 36 | + .addImage(image, 0, 0, 300, 400) |
| 37 | + .setColor('#FFAE23') |
| 38 | + .setTextFont('28px Impact') |
| 39 | + .setTextAlign('center') |
| 40 | + .addText('Kitten!', 150, 370) |
| 41 | + .toBuffer(); |
| 42 | +} |
| 43 | +``` |
| 44 | + |
| 45 | +- That will create a canvas with size of 300 pixels width, 400 pixels height. |
| 46 | +- Draw an image, given a Buffer (the image from the images folder). |
| 47 | +- Set the colour to #FFAE23 |
| 48 | +- Set the font size to 28 pixels with font Impact. |
| 49 | +- Set the text alignment to center. |
| 50 | +- Write the text 'Kitten!' in the position (150, 370) |
| 51 | +- Return a buffer. |
| 52 | + |
| 53 | +And now, you have created an image with a kitten in the background and some centered text in the bottom of it. |
0 commit comments