image-collage's Introduction

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

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()

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 a string (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 are image/jpeg, raw, application/pdf and image/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.
neptunian for react-photo-gallery
- Used their row layout and column layout implementation. Added copyright in the used files.

image-collage's People

Contributors

Stargazers

Watchers

image-collage's Issues

Add support for column layout

As you can see in react-photo-gallery there are 2 layouts: row and column.

In this library, we have both algorithms but the createCollage function is always using the row layout one (here).

To close this issue, a new option to createCollage should be added (layout = 'row'). When specifying row, do the same it is currently doing. For layout = 'column', use computeColumnLayout from src/layouts/columns.js similar to https://github.com/neptunian/react-photo-gallery/blob/master/src/Gallery.js#L76

Can't install

$ npm install @mtblc/image-collage --registry=https://npm.pkg.github.com/mtblc
npm ERR! code E401
npm ERR! Unable to authenticate, need: Basic realm="GitHub Package Registry"

Add collage margin

In react-photo-gallery there is a small space between each image in the preview from README.md.

This is called margin and it is used here and passed down here.

By adding this margin, the width and height of the resulting image will be different. The same with the position of each image in the collage. It should consider the new positions here

Recommend Projects