JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 4
  • Score
    100M100P100Q35974F
  • License MIT

List image generated based on JIMP

Package Exports

  • list-gen

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (list-gen) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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();