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 it side by side and produce a merged copy of the two in a new .jpg or .png image file?

Answer 1

You can use JavaScript to 'merge' them into one canvas, and convert that canvas to image.

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var imageObj1 = new Image(); var imageObj2 = new Image(); imageObj1.src = "1.png" imageObj1.onload = function() {    ctx.drawImage(imageObj1, 0, 0, 328, 526);    imageObj2.src = "2.png";    imageObj2.onload = function() {       ctx.drawImage(imageObj2, 15, 85, 300, 300);       var img = c.toDataURL("image/png");       document.write('<img src="' + img + '" width="328" height="526"/>');    } }; 

Due to security, your two images must be on the same domain with your JavaScript file (i.e http://123.com/1.png, http://123.com/2.png and http://123.com/script.js) otherwise the function toDataURL() will raise an error.

Answer 2

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!

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