Sharing is caring!

Easily compose images together without messing around with canvas

Build Status Coverage Status npm npm

Canvas can be kind of a pain to work with sometimes, especially if you just need a canvas context to do something relatively simple like merge some images together. merge-images abstracts away all the repetitive tasks into one simple function call.

Images can be overlaid on top of each other and repositioned. The function returns a Promise which resolves to a base64 data URI. Supports both the browser and Node.js.


npm install --save merge-images

or for quick testing:

<script src=""></script>


With the following images:

/body.png /eyes.png /mouth.png

You can do:

import mergeImages from 'merge-images';

mergeImages(['/body.png', '/eyes.png', '/mouth.png'])
  .then(b64 =&gt; document.querySelector('img').src = b64);
  // data:image/png;base64,iVBORw0KGgoAA...

And that would update the img element to show this image:


Those source png images were already the right dimensions to be overlaid on top of each other. You can also supply an array of objects with x/y co-ords to manually position each image:

  { src: 'body.png', x: 0, y: 0 },
  { src: 'eyes.png', x: 32, y: 0 },
  { src: 'mouth.png', x: 16, y: 0 }
  .then(b64 =&gt; ...);
  // data:image/png;base64,iVBORw0KGgoAA...

Using the same source images as above would output this:


The opacity can also be tweaked on each image.

  { src: 'body.png' },
  { src: 'eyes.png', opacity: 0.7 },
  { src: 'mouth.png', opacity: 0.3 }
  .then(b64 =&gt; ...);
  // data:image/png;base64,iVBORw0KGgoAA...

Mate – React Redux Material Admin Dashboard

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.