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

Category: Image , Recommended | April 4, 2018
Author: lukechilds
Views Total: 2,897
Official Page: Go to website
Last Update: April 4, 2018
License: MIT

Preview:

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

Description:

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
  
})

You Might Be Interested In:


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

  1. Arun

    Hi,

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

    Reply

Leave a Reply