JSPM

@nodefactory/photo-collage

1.4.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • 0
  • Score
    100M100P100Q50996F
  • License ISC

Turns an array of images into a photo collage

Package Exports

  • @nodefactory/photo-collage

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nodefactory/photo-collage) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

nf-photo-collage

Combines several images into a photo collage.

This is slightly restructured version of original photo-collage repo. It is also using RectangleEquals fork so it is using Canvas v2.

Changes

  • Removed header and support for adding text
  • Add support for adding image as background
  • Add typings (index.d.ts)

Installation

yarn add nf-photo-collage

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

Usage

import createCollage from "nf-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.
  backgroundImage: "./localfile.png" // same formats supported as source
  spacing: 2, // optional: pixels between each image
};

createCollage(options)
  .then((canvas) => {
    const src = canvas.jpegStream();
    const dest = fs.createWriteStream("myFile");
    src.pipe(dest);
  });

Example

Source files

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

Result

Result