Merge Image using Javascript

Question

Is it possible to merge pictures using javascript?

For example, if you have 2 rectangle .jpg or .png images files of the same size, is it possible that you can align

Answer 1

Updating this for 2019/2020+: there's an awesome npm package for this called merge-images

And its usage is very simple!

import mergeImages from 'merge-images';

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

You can further customize it with positioning, opacity (both per-image) and the output's dimensions!

(Not related to this package in any way, I just wasted 3 days getting html2canvas to work and then found this lifesaver!)