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

Category: Image , Recommended | April 4, 2018
Views Total:15,538 views
Official Page:Go to website
Last Update:April 4, 2018


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 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.

  { 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

You Might Be Interested In:

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

  1. Arun


    I am getting error if i use external images.Can you please suggest hoe to fix it.

    Error:”Uncaught (in promise) DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.”


Leave a Reply