@wylie39/image-collage
v0.1.0
Published
Turns an array of images into a photo collage
Downloads
165
Readme
image-collage
Turns an array of images into a photo collage
Preview
Installation
npm install @mtblc/image-collage --registry=https://npm.pkg.github.com/mtblc
or
yarn add @mtblc/image-collage --registry=https://npm.pkg.github.com/mtblc
Quick Example
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);
});
Documentation
createCollage()
createCollage(sources: Array<string | Buffer>, maxWidth: 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 astring
(relative path to an image or a image URL). - maxWidth: the max width of the resulting collage.
- mimeType: optional, a string indicating the image format. Default value is
image/png
, but other posible values areimage/jpeg
,raw
,application/pdf
andimage/svg+xml
. See Canvas#tobuffer for more information.
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.