image-collage

Create photo collage from array of images. This package is a fork version of @wylie39/image-collage. These are what modified from the original version.

• adding default value for maxWidth. The default value is 1000.
• adding rowHeight argument to createCollage function.
• change default output image's mime type from image/png to image/jpeg.

Preview

Installation

npm install @manit-tree/image-collage

Quick Example

const { createCollage } = require('@manit-tree/image-collage');
const fs = require('fs');

// You can pass an array containing string URLs, file paths or an image Buffer
const photos = [
  'https://images.unsplash.com/photo-1569219420570-273beaf1c05a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max',
  'https://images.unsplash.com/photo-1569296226058-3b57006d13fd?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max',
  'https://images.unsplash.com/photo-1569910730959-c9f8a6c3f006?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max',
  'https://images.unsplash.com/photo-1571125280192-0ba531bd355a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max',
  'https://images.unsplash.com/photo-1570005435342-7541f89273e8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max',
  'https://images.unsplash.com/photo-1569099377939-569bbac3c4df?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max',
  'https://images.unsplash.com/photo-1569139476647-0e66370a3055?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max',
  'https://images.unsplash.com/photo-1569629250494-432d0d5a7d0d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max',
  'https://images.unsplash.com/photo-1569613701109-e8b2bdf76ef3?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max',
  'https://images.unsplash.com/photo-1571378781535-75e518ec1a21?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max',
  'https://images.unsplash.com/photo-1570708460963-5139eb12e014?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max',
];

const collageWidth = 1000;
const rowHeight = 300;

createCollage(photos, collageWidth, rowHeight).then((imageBuffer) => {
  fs.writeFileSync("out.jpg", imageBuffer);
});

Documentation

• createCollage()

createCollage()

createCollage(sources: Array<string | Buffer>, maxWidth: number, rowHeight?: number, mimeType?: string) => Buffer

Creates a Buffer object representing the collage image.

• sources: source of the images you want to merge in a single collage. Each element can be a Buffer image or a string (relative path to an image or a image URL).
• maxWidth: optional, the max width of the output collage. Default value is 1000.
• rowHeight: optional, the row height of the output collage. Default value is 300.
• mimeType: optional, a string indicating the image format. Default value is image/jpeg, but other posible values are image/png, raw, application/pdf and image/svg+xml. See Canvas#tobuffer for more information.

Acknowledge

• This is a fork version of @wylie39/image-collage