Merge Image using Javascript

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?

Answers:

Answer

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 rise an error.

Answer

Hu?nh Qu?c Phong is partially right:

You can use Canvas to merge images. But they can origin from other domains. Just load the pictures in your dom . Once the pictures are loaded (can be checked with javascript, see below) you can use them in your canvas.

var canvas = canvasBuild.getContext('canvasObj');
var img = document.getElementById('mergePic1');
canvas.drawImage(img, 0, 0);

To check if the images were loaded, I would recommend using the jQuery plugin http://desandro.github.io/imagesloaded/ - but it can also be done without.

Answer

I know this is an old post, but I ran across it searching for a solution to this question, myself. Even moreso, I wanted to be able to upload the images that should be used (without needing to rely on server-side logic).

I've created a fiddle (http://jsfiddle.net/davidwalton/4pjreyfb/6/ ) that builds on this:

How to make a simple image upload using Javascript/HTML

I then added Hu?nh Qu?c Phong's logic above (Merge Image using Javascript):

HTML:

<input class="file1" type="file" data-image-selector=".image1" />
<input class="file2" type="file" data-image-selector=".image2" />
<br />
<img class="image1 hidden" alt="medium image 1" />
<img class="image2 hidden" alt="medium image 2" />
<br />
<input class="btn-merge" type="button" value="Merge!" />
<br />
<img class="merged-image hidden" alt="merged image" />
<canvas id="canvas" class="hidden"></canvas>

JS:

$('.file1, .file2').on('change', function() {
  var reader = new FileReader(),
    imageSelector = $(this).data('image-selector');

  if (this.files && this.files[0]) {
    reader.onload = function(e) {
      imageIsLoaded(e, imageSelector)
    };
    reader.readAsDataURL(this.files[0]);
  }
});

$('.btn-merge').on('click', merge);

function imageIsLoaded(e, imageSelector) {
  $(imageSelector).attr('src', e.target.result);
  $(imageSelector).removeClass('hidden');
};

function merge() {
  var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    imageObj1 = new Image(),
    imageObj2 = new Image();

  imageObj1.src = $('.image1').attr('src');
  imageObj1.onload = function() {
    ctx.globalAlpha = 1;
    ctx.drawImage(imageObj1, 0, 0, 328, 526);
    imageObj2.src = $('.image2').attr('src');;
    imageObj2.onload = function() {
      ctx.globalAlpha = 0.5;
      ctx.drawImage(imageObj2, 15, 85, 300, 300);
      var img = canvas.toDataURL('image/jpeg');
      $('.merged-image').attr('src', img);
      $('.merged-image').removeClass('hidden');
    }
  };
}

Additionally, it incorporates a bit of transparency just to allow for two jpegs to be utilized.

Note that all image positioning & sizing is managed via the ctx.drawImage() functions. The demo will be ugly, but it should prove the concept. :)

Hopefully this is helpful!

Answer

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

Answer

You could use the Pixastic JavaScript library to combine, filter and blend multiple images. http://www.pixastic.com/lib/docs/actions/blend/

But this is only working in modern Browsers that are supporting the Canvas-element. Unfortunately IE8 is not supporting this.

Answer

No you cannot do that.

With some css/html magic you can make then appear merged.


If you want them actually merged, I would suggest Photoshop.

Or you can have some server code create and merge images for you.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.