pixeli 0.1.0

package/lib/merges/masonry-merge/vertical.js

@@ -0,0 +1,146 @@
+import sharp from 'sharp';
+import { scaleImages } from '../merge-utils.js';
+import { progressBar, WRITING_TO_FILE_PERCENTAGE } from '../../helpers/progressBar.js';
+
+export const buildVerticalMasonry = async (images, params) => {
+  const { gap, canvasColor, canvasHeight, columnWidth, vAlign } = params;
+
+  // Use 5% of images.length for writing to file
+  const fileWriteAmount = Math.ceil(images.length * WRITING_TO_FILE_PERCENTAGE);
+  progressBar.start(images.length + fileWriteAmount, 0, {
+    stage: 'Merging images',
+  });
+
+  // Rescale images to match columnWidth
+  const scaledImages = await scaleImages(images, { width: columnWidth });
+
+  // Split images into columns, then calculate canvasWidth
+  const columns = await splitIntoColumns(scaledImages, canvasHeight, gap, vAlign);
+  console.log(columns.length);
+  columns.forEach((col) => {
+    console.log(col.length);
+  });
+  const canvasWidth = columns.length * columnWidth + (columns.length + 1) * gap;
+
+  // Create and return grid of images
+  return await createMasonryLayout(columns, columnWidth, canvasWidth, canvasHeight, canvasColor, gap, vAlign);
+};
+
+const createMasonryLayout = async (cols, columnWidth, canvasWidth, canvasHeight, canvasColor, gap, vAlign) => {
+  const composites = [];
+
+  const canvas = sharp({
+    create: {
+      width: canvasWidth,
+      height: canvasHeight,
+      channels: 4,
+      background: canvasColor,
+    },
+  });
+
+  let x = gap;
+  let currentHeight = gap;
+
+  for (const col of cols) {
+    let y = await computeColYOffset(col, canvasHeight, gap, vAlign);
+
+    for (const im of col) {
+      let finalizedImage = im;
+      let finalizedMeta = await im.metadata();
+
+      currentHeight += finalizedMeta.height + gap;
+
+      if (currentHeight >= canvasHeight) {
+        const yOverflow = currentHeight - canvasHeight;
+
+        const resizeOptions = {
+          width: finalizedMeta.width,
+          height: finalizedMeta.height - yOverflow,
+          fit: 'cover',
+        };
+
+        const buffer = await finalizedImage.resize(resizeOptions).toBuffer();
+        finalizedImage = sharp(buffer);
+        finalizedMeta = await finalizedImage.metadata();
+
+        // Update progress bar
+        progressBar.increment();
+      }
+
+      composites.push({
+        input: await finalizedImage.toBuffer(),
+        left: x,
+        top: y,
+      });
+
+      y += finalizedMeta.height + gap;
+    }
+
+    y = gap;
+    currentHeight = gap;
+    x += columnWidth + gap;
+  }
+
+  return canvas.composite(composites);
+};
+
+const splitIntoColumns = async (images, canvasHeight, gap, vAlign) => {
+  const cols = [];
+  const currentCol = [];
+  let currentHeight = gap;
+
+  for (const im of images) {
+    const meta = await im.metadata();
+    let nextHeight = currentHeight + meta.height + gap;
+
+    if (vAlign === 'justified') {
+      // Greedy: always push image, fix overflow later
+      currentCol.push(im);
+      currentHeight = nextHeight;
+
+      if (currentHeight + gap >= canvasHeight) {
+        cols.push(currentCol.slice());
+        currentCol.length = 0;
+        currentHeight = gap;
+      }
+    } else {
+      // Non-greedy: break BEFORE adding image that doesn't fit
+      if (nextHeight > canvasHeight && currentCol.length > 0) {
+        cols.push(currentCol.slice());
+        currentCol.length = 0;
+        currentHeight = gap;
+      }
+
+      // Add the image (may be first in a new column)
+      currentCol.push(im);
+      currentHeight += meta.height + gap;
+    }
+  }
+
+  if (currentCol.length > 0) {
+    cols.push(currentCol);
+  }
+
+  return cols;
+};
+
+const computeColYOffset = async (col, canvasHeight, gap, vAlign) => {
+  // Calculate total row width
+  let totalHeight = gap * (col.length + 1);
+  for (const im of col) {
+    const meta = await im.metadata();
+    totalHeight += meta.height;
+  }
+
+  // Get x offset
+  if (vAlign === 'top' || vAlign === 'justified') {
+    return gap;
+  }
+  if (vAlign === 'bottom') {
+    return canvasHeight - totalHeight + gap;
+  }
+  if (vAlign === 'middle') {
+    const canvasGap = gap * 2;
+    return Math.floor((canvasHeight + canvasGap - totalHeight) / 2);
+  }
+};

package/lib/merges/merge-utils.js

@@ -0,0 +1,156 @@
+import sharp from 'sharp';
+
+export const calculateAvgHeight = async (images) => {
+  let totalHeight = 0;
+
+  for (const img of images) {
+    const meta = await img.metadata();
+    totalHeight += meta.height;
+  }
+
+  return Math.floor(totalHeight / images.length);
+};
+
+export const calculateAvgWidth = async (images) => {
+  let totalWidth = 0;
+
+  for (const img of images) {
+    const meta = await img.metadata();
+    totalWidth += meta.width;
+  }
+
+  return Math.floor(totalWidth / images.length);
+};
+
+export const scaleImages = async (images, { width = null, height = null }) => {
+  if (!width && !height) {
+    throw new Error('You must provide either width or height.');
+  }
+
+  const scaledImages = await Promise.all(
+    images.map(async (image) => {
+      const meta = await image.metadata();
+
+      let targetWidth, targetHeight;
+
+      if (width) {
+        const f = width / meta.width;
+        targetWidth = width;
+        targetHeight = Math.floor(meta.height * f);
+      } else {
+        const f = height / meta.height;
+        targetHeight = height;
+        targetWidth = Math.floor(meta.width * f);
+      }
+
+      const buffer = await image.resize(targetWidth, targetHeight).toBuffer();
+
+      return sharp(buffer);
+    })
+  );
+
+  return scaledImages;
+};
+
+export const getSmallestImageDimensions = async (images) => {
+  const metas = await Promise.all(images.map((img) => img.metadata()));
+
+  return metas.reduce(
+    (acc, meta) => ({
+      smallestWidth: Math.min(acc.smallestWidth, meta.width),
+      smallestHeight: Math.min(acc.smallestHeight, meta.height),
+    }),
+    { smallestWidth: Infinity, smallestHeight: Infinity }
+  );
+};
+
+export const getFontSize = async ({
+  text,
+  maxWidth,
+  maxHeight,
+  initialFontSize = 100,
+  minFontSize = 2,
+  fontFamily = 'sans-serif',
+}) => {
+  const THRESHOLD = 200;
+  const SMALL_CHANGE = 2;
+  const LARGE_CHANGE = 5;
+
+  let fontSize = initialFontSize;
+
+  while (fontSize >= minFontSize) {
+    // No width or viewport given so that the actual size can be determined after rasterization
+    const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg">
+      <text
+        x="${maxWidth / 2}"
+        y="10"
+        font-size="${fontSize}"
+        font-family="${fontFamily}"
+        fill="#000000"
+        text-anchor="middle"
+        dominant-baseline="middle">
+        ${escapeXML(text)}
+      </text>
+    </svg>
+    `;
+
+    // Rasterize SVG: measure actual rendered size
+    const raster = await sharp(Buffer.from(svg)).png().toBuffer();
+    const meta = await sharp(raster).metadata();
+
+    if (meta.width <= maxWidth && meta.height <= maxHeight) {
+      return fontSize;
+    }
+
+    // If the difference is greater than the threshold, use large change
+    if (maxWidth - meta.width > THRESHOLD || maxHeight - meta.height) {
+      fontSize -= LARGE_CHANGE;
+    } else {
+      fontSize -= SMALL_CHANGE;
+    }
+  }
+
+  return minFontSize;
+};
+
+export const createSvgTextBuffer = ({ text, maxWidth, maxHeight, fontSize, fill = '#000000', fontFamily = 'sans-serif' }) => {
+  // Width and viewport are assigned to this svg
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg"
+         width="${maxWidth}" height="${maxHeight}"
+         viewBox="0 0 ${maxWidth} ${maxHeight}">
+      <text
+        x="${maxWidth / 2}"
+        y="${maxHeight / 2}"
+        font-size="${fontSize}"
+        font-family="${fontFamily}"
+        fill="${fill}"
+        text-anchor="middle"
+        dominant-baseline="middle">
+        ${escapeXML(text)}
+      </text>
+    </svg>
+    `;
+
+  return Buffer.from(svg);
+};
+
+const escapeXML = (str) => {
+  return str.replace(
+    /[<>&'"]/g,
+    (c) =>
+      ({
+        '<': '&lt;',
+        '>': '&gt;',
+        '&': '&amp;',
+        '"': '&quot;',
+        "'": '&apos;',
+      }[c])
+  );
+};
+
+/*
+      
+
+*/

package/lib/merges/square-merge/index.js

@@ -0,0 +1,141 @@
+import path from 'node:path';
+import sharp from 'sharp';
+import { createSvgTextBuffer, getFontSize, getSmallestImageDimensions } from '../merge-utils.js';
+import { progressBar, WRITING_TO_FILE_PERCENTAGE } from '../../helpers/progressBar.js';
+
+export const squareMerge = async (files, images, opts) => {
+  const { gap, canvasColor, fitMode, imageSize, paddingColor, columns, caption, captionColor, maxCaptionSize } = opts;
+
+  // Determine target size
+  let newImageSize;
+  if (imageSize) {
+    // Use user-provided size directly
+    newImageSize = imageSize;
+  } else {
+    // Use smallest dimensions if imageSize is not provided
+    const { smallestWidth, smallestHeight } = await getSmallestImageDimensions(images);
+    newImageSize = Math.min(smallestWidth, smallestHeight);
+  }
+
+  // Convert / normalize images (square, pad/crop, resize)
+  const normalizedImages = await normalizeImages(images, paddingColor, newImageSize, fitMode);
+
+  // Lay images in a grid and return
+  const grid = await layImagesInGrid({
+    files,
+    images: normalizedImages,
+    columns,
+    size: newImageSize,
+    gap,
+    canvasColor,
+    caption,
+    captionColor,
+    maxCaptionSize,
+  });
+  return grid;
+};
+
+export const layImagesInGrid = async (opts) => {
+  const CAPTION_HEIGHT_TO_CANVAS_WIDTH_RATIO = 0.04;
+  const { files, images, columns, size, gap, canvasColor, caption, captionColor, maxCaptionSize } = opts;
+
+  // Use 5% of images.length for writing to file
+  const fileWriteAmount = Math.ceil(images.length * WRITING_TO_FILE_PERCENTAGE);
+  progressBar.start(images.length + fileWriteAmount, 0, {
+    stage: 'Merging images',
+  });
+
+  // Calculate base variables
+  const rows = Math.ceil(images.length / columns);
+  const canvasWidth = columns * size + (columns + 1) * gap;
+  const captionHeight = Math.floor(canvasWidth * CAPTION_HEIGHT_TO_CANVAS_WIDTH_RATIO);
+
+  // Get filenames and fontsize if needed
+  let filenames = null;
+  let fontSize = null;
+  if (caption) {
+    filenames = files.map((file) => path.basename(file));
+
+    const longestFilename = filenames.reduce((longest, current) => {
+      return current.length > longest.length ? current : longest;
+    });
+
+    fontSize = await getFontSize({
+      text: longestFilename,
+      maxWidth: size,
+      maxHeight: captionHeight,
+      initialFontSize: maxCaptionSize,
+    });
+  }
+
+  const minimumCanvasHeight = rows * size + (rows + 1) * gap;
+  const canvasHeight = caption ? minimumCanvasHeight + rows * captionHeight : minimumCanvasHeight;
+
+  // Create blank canvas
+  let canvas = sharp({
+    limitInputPixels: false,
+    create: {
+      width: canvasWidth,
+      height: canvasHeight,
+      channels: 4,
+      background: canvasColor,
+    },
+  });
+
+  // Build composite array
+  const composites = [];
+
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < columns; col++) {
+      const idx = row * columns + col;
+      if (idx >= images.length) break;
+
+      const x = gap + col * (size + gap);
+      const y = caption ? gap + row * (size + gap + captionHeight) : gap + row * (size + gap);
+
+      composites.push({
+        input: await images[idx].toBuffer(), // ensure buffer
+        left: x,
+        top: y,
+      });
+
+      // Add caption if required
+      if (caption) {
+        // Create text
+        const svgBuffer = createSvgTextBuffer({
+          text: filenames[idx],
+          maxWidth: size,
+          maxHeight: captionHeight,
+          fontSize,
+          fill: captionColor,
+        });
+
+        // Add text to composites
+        composites.push({
+          input: svgBuffer,
+          left: x,
+          top: y + size,
+        });
+
+        // Update progress bar
+        progressBar.increment();
+      }
+    }
+  }
+
+  // Composite all images at once
+  canvas = canvas.composite(composites);
+
+  return canvas;
+};
+
+const normalizeImages = async (images, paddingColor, targetSize, fitMode) => {
+  return images.map((image) =>
+    image.resize({
+      fit: fitMode,
+      width: targetSize,
+      height: targetSize,
+      background: paddingColor,
+    })
+  );
+};

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "pixeli",
+  "version": "0.1.0",
+  "description": "A lightweight command-line tool for merging multiple images into customizable grid layouts.",
+  "homepage": "https://github.com/pakdad-mousavi/pixeli#readme",
+  "bugs": {
+    "url": "https://github.com/pakdad-mousavi/pixeli/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pakdad-mousavi/pixeli.git"
+  },
+  "bin": {
+    "pixeli": "bin/pixeli.js"
+  },
+  "license": "ISC",
+  "author": "Pakdad Mousavi",
+  "type": "module",
+  "main": "index.js",
+  "files": [
+    "/lib",
+    "/bin",
+    "/commands"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "chalk": "^5.6.2",
+    "cli-progress": "^3.12.0",
+    "commander": "^14.0.2",
+    "sharp": "^0.34.5"
+  }
+}