img-grid

Generate image grids from URLs (and highlight images).

Installation

npm install @visualizevalue/img-grid

Usage

import { grid } from '@visualizevalue/img-grid'
import { writeFileSync } from 'fs'

// Define image URLs with optional IDs
const images = [
  { url: 'https://example.com/image1.jpg', id: 'img1' },
  { url: 'https://example.com/image2.jpg', id: 'img2' },
  { url: 'https://example.com/image3.jpg', id: 'img3' },
  { url: 'https://example.com/image4.jpg', id: 'img4' },
]

// Create a grid with default options
const buffer = await grid(images)

// Or highlight specific images (makes them 2×2)
const highlightedBuffer = await grid(images, {
  highlight: ['img2', 'img3'], // Images with these IDs will be 2×2
  maxWidth: 1920, // Maximum width of output image
  concurrency: 10, // Maximum concurrent downloads
})

// Save to file
writeFileSync('grid.png', buffer)

Features

• Arranges images in an optimal grid layout
• Supports highlighting specific images (makes them 2×2)
• Handles failed image downloads with placeholders
• Limits concurrent downloads
• Resizes all images to fit grid cells

Options

| Option | Default | Description | | ------------- | ------- | ------------------------------------------ | | highlight | [] | Array of image IDs to highlight (make 2×2) | | maxWidth | 1920 | Maximum width of output image in pixels | | concurrency | 10 | Maximum concurrent image downloads |