list-gen

List image generated based on JIMP

Usage no npm install needed!

<script type="module">
  import listGen from 'https://cdn.skypack.dev/list-gen';
</script>

README

list-gen

A simple helper package for generating lists in JIMP.

Basic Usage

const lines = ['Item #1', 'Item #2', '...'];

const options = {
    /* Initial XY Coordinates - Optional, indicates where the first line of text will be placed on the page */
    initialXY: [
        [50, 100], // Page 1
        [50, 20] // Page >= 2 (Optional)
    ],
    /* Line Spacing - Optional, a function which modifies x, y values passed through it */
    spacing: (x, y) => {
        return [x, y + 40]; // This example adds 40px to the y value every new line
    },
    /* Write Image - Optional, when specified, outputs .jpg files in addition to returning buffer(s) */
    write: './output/',
    /* Max Lines - Optional, forces a new page when X amount of lines are on the page */
    maxLines: [
        25, // Page 1
        40 // Page >= 2 (Optional)
    ],
    /* First Background - Required, the image background displayed on the first (or subsequent) page */
    firstBG: './bg-1.png',
    /* Extra Backgrounds - Optional, the image background displayed on pages 2 and above */
    extraBG: './bg-2.png',
    /* Font - Optional, the font to be used, has to be compatible with Jimp */
    font: './myFont.fnt'
};
const List = require('list-image-gen'); // Require Package

const list = new List(lines, options); // Create List Object
const resp = await list.generate(); // Generate list

Examples

Use yarn test or npm run test to compile these yourself

1. Basic todo list | Output

const list = new List(
    [...new Array(22)].map((_, i) => `Item #${i}`),
    {
        initialXY: [420, 420],
        spacing: (x, y) => [x, y + 96.3],
        firstBG: path.join(__dirname, '/resources/todolist.jpg'),
        write: path.join(__dirname, '/output/todolist/'),
        font: Jimp.FONT_SANS_128_BLACK
    }
);
await list.generate();

2. Pixel Art Theme | Output

const list = new List(
    [...new Array(200)].map((_, i) => `Item #${i}`),
    {
        initialXY: [
            [60, 280], // Page 1
            [60, 10] // Page >= 2
        ],
        spacing: (x, y, {remainingLines, pageNumber}) => {
            if (pageNumber === 0) {
                y += remainingLines.length % 6 === 0 ? 2 : 0; // Every 6 items on the first page, add 2 to the y position
            }

            return [x, y + 40];
        },
        maxLines: [41, 48],
        write: path.join(__dirname, '/output/pixelart/'),
        firstBG: path.join(__dirname, '/resources/first.png'),
        extraBG: path.join(__dirname, '/resources/extra.png'),
        font: path.join(__dirname, '/resources/hypnoverse.fnt')
    }
);
await list.generate();

3. Staircase Style | Output

const list = new List(
    [...new Array(10)].map((_, i) => `User ${i}`),
    {
        initialXY: [0, 5],
        spacing: (x, y) => [x + 100, y + 25],
        write: path.join(__dirname, '/output/staircase/'),
        firstBG: path.join(__dirname, '/resources/background.png')
    }
);
await list.generate();