Easily compose images together without messing around with canvas
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:
With the following images:
You can do:
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:
Using the same source images as above would output this:
The opacity can also be tweaked on each image.
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:
Which will look like this:
Usage in Node.js is the same, however you'll need to also require node-canvas and pass it in via the options object.
const mergeImages = ;const Canvas Image = ;;// data:image/png;base64,iVBORw0KGgoAA...
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
Returns a Promise which resolves to a base64 data URI
Array of valid image sources for
Alternatively an array of objects with
y co-ords and
src property with a valid image source.
A DOMString indicating the image format.
A number between 0 and 1 indicating image quality if the requested format is image/jpeg or image/webp.
The width in pixels the rendered image should be. Defaults to the width of the widest source image.
The height in pixels the rendered image should be. Defaults to the height of the tallest source image.
Canvas implementation to be used to allow usage outside of the browser. e.g Node.js with node-canvas.
crossOrigin attribute that
Image instances should use. e.g
Anonymous to support CORS-enabled images.
MIT © Luke Childs