image-collage
Turns an array of images into a photo collage
Preview
Installation
npm install --save @mtblc/image-collage
or
yarn add @mtblc/image-collage
Usage
const { createCollage } = require('@mtblc/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;
createCollage(photos, collageWidth).then((imageBuffer) => {
fs.writeFileSync("out.png", imageBuffer);
});
Acknowledge
Heavily inspired in the following projects:
- classdogo for photo-collage
- Their API inspired this project API and used a modified version of their
getPhoto
function.
- Their API inspired this project API and used a modified version of their
- neptunian for react-photo-gallery
- Used their row layout and column layout implementation. Added copyright in the used files.