Merge Multiple Images To One Image – merge-images.js

merge-images.js is a JavaScript library that merges multiple images to one image with Canvas. Supports both node.js and browser.

How to use it:

Install the library with NPM.

# NPM
$ npm install merge-images --save

Import the merge-images.js to your project.

import mergeImages from 'merge-images';

Define an array of images to merge.

mergeImages(['1.jpg', '2.jpg', '3.jpg'])

Display the merged image in the page.

<img />

.then(b64 => document.querySelector('img').src = b64);

Specify the opacity and position of the images.

mergeImages([
  { src: '1.png', x: 0, y: 0, },
  { src: '2.png', x: 32, y: 0, opacity: 0.6},
  { src: '3.png', x: 16, y: 0, opacity: 0.5 }
])

Default customization options.

mergeImages(['1.jpg', '2.jpg', '3.jpg'],{
  // file format
  // quality
  quality: 0.92,
  // width/heigh
  width: undefined,
  height: undefined,
  // allows usage outside of the browser
  Canvas: undefined
  
})