cacaodev/join-images

Merge multiple images into a single image

join-images

Merge multiple images into a single image

join-images is modified version of merge-img to make it work with sharp library.

join-images merges given images into a single image in right order. This will be helpful in a situation when you have to generate a preview of multiple images into a single image. This module is based on sharp for image processing.

Image credit: https://www.pexels.com/

Install

$ npm install sharp join-images

$ yarn add sharp join-images

Usage

import joinImages from 'join-images';

joinImages(['image-1.png', 'image-2.jpg']).then((img) => {
  // Save image as file
  img.toFile('out.png');
});

API

joinImages(images[, options])

• images Array of (String | Object | Buffer) - List of images to concat. If String is passed, it will be considered to the file path. An Object entry can have following options:
  • src String or Buffer - A single image source to concat.
  • offsetX Number (optional) - x offset to affect this image. Default is 0.
  • offsetY Number (optional) - y offset to affect this image. Default is 0.
• options Object (optional)
  • direction String (vertical|horizontal) - Direction of the merged image.`.
  • color (String | Object) - Default background color represented by RGBA hex value. Default is { alpha: 0.5, b: 0, g: 0, r: 0 }.
  • align String - Aligning of given images. If the images are not all the same size, images will be sorted to largest image. Possible values are start, center and end. Default is start.
  • offset Number - Offset in pixels between each image. Default is 0.
  • margin (Number | String | Object) - Margin of the result image. If Number or String is passed, it will be considered as standard css shorthand properties (e.g. '40 40 0 10'). An Object entry can have following options:
    • top Number (optional) - Margin on top side of result image. Default is 0.
    • right Number (optional) - Margin on right side of result image. Default is 0.
    • bottom Number (optional) - Margin on bottom side of result image. Default is 0.
    • left Number (optional) - Margin on left side of result image. Default is 0.

Returns a Promise that contains sharp object.