Canvas can be kind of a pain to work with sometimes. There's lots of repetitive code to get a working canvas instance, load an image into that instance, handle async image loads correctly etc. This can lead to quite a lot of boilerplate code for something relatively simple like merging 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. Works both in the browser and in Node.js.
Those source png images where 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:
```js
mergeImages([
{ src: 'body.png', x: 0, y: 0 },
{ src: 'eyes.png', x: 32, y: 0 },
{ src: 'mouth.png', x: 16, y: 0 }
])
.then(b64 => ...);
// data:image/png;base64,iVBORw0KGgoAA...
```
Using the same source images as above would output this:
By default the new image dimensions will be set to the width of the widest source image and the height of the tallest source image. You can manually specify your own dimensions in the options object:
Usage in Node.js is the same, however you'll need to also require [node-canvas](https://github.com/Automattic/node-canvas) and pass it in via the options object.
One thing to note is that you need to provide a valid image source for the node-canvas `Image` rather than a DOM `Image`. Notice the above example uses a file path, not a relative URL like the other examples. Check the node-canvas docs for more information on valid `Image` sources.
