Skip to content
Turns an array of images into a photo mosaic
JavaScript
Branch: master
Clone or download
peterkhayes Merge pull request #2 from settlin/master
Add the features of an optional header and an optional footer text
Latest commit 29a10bd Aug 17, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples Update collage-with-text.js Aug 17, 2016
img added test suite May 12, 2016
.gitignore add text support Jul 5, 2016
.npmignore added test suite May 12, 2016
README.md Update README.md Aug 17, 2016
index.js header Jul 6, 2016
package.json Update package.json Aug 16, 2016
test.js changed name May 13, 2016

README.md

photo-collage

Combines several images into a photo collage.

Example

Source files

Source file 1 Source file 2 Source file 3 Source file 4 Source file 5 Source file 6

Result

Result

Installation

npm install --save photo-collage

This library depends on node-canvas, which may require additional setup. See their installation page for details.

Usage

The following example creates a 2x3 collage from a variety of image sources.

const createCollage = require("photo-collage");

const options = {
  sources: [
    imageBufferObject, // source can be a buffer of jpg/png data
    canvasObject, // source can be a canvas object
    "http://myurl.com/image.jpg", // source can be a url string
    "https://myurl.com/image.jpg", // https/ftp is ok too.
    "./localfile.png", // source can be a relative file path
    "~/photos/file.png" // source can be an absolute file path
  ],
  width: 3, // number of images per row
  height: 2, // number of images per column
  imageWidth: 350, // width of each image
  imageHeight: 250, // height of each image
  // backgroundColor: "#cccccc", // optional, defaults to #eeeeee.
  spacing: 2, // optional: pixels between each image
  lines: [
    {font: "", color: "", text: "Sometimes we want to find out when a single one time event has"},
    {font: "", color: "", text: "Sometimes we want to find out when a single one time event has"},
    {font: "", color: "", text: "Sometimes we want to find out when a single one time event has"},
    {font: "", color: "", text: "Sometimes we want to find out when a single one time event has"},
    {font: "", color: "", text: "Sometimes we want to find out when a single one time event has"},
  ],
  //text: "Sometimes we want to find out when a single one time event has finished. For example - a stream is done. For this we can use new Promise. Note that this option should be considered only if automatic conversion isn't possible.Note that promises model a single value through time, they only resolve once - so while they're a good fit for a single event, they are not recommended for multiple event APIs."
  //textStyle: {color: "#fff", fontSize: 20, font: "Arial", height: 300}
  // we can use either lines or text (text will be warped)
};

createCollage(options)
  .then((canvas) => {
    const src = canvas.jpegStream();
    const dest = fs.createWriteStream("myFile");
    src.pipe(dest);
  });
You can’t perform that action at this time.