Как объединить несколько изображений на странице в одно?

Question

[srnsdlmtn]

В общем суть в том, что есть некий конструктор, в котором при выборе разных пунктов одно изображение накладывается на другое, в итоге нужно сделать так, чтобы они все каким то образом объединялись в одно с возможностью использования на этой же странице или с возможностью сохранения этого изображения.
Гуглил много, ничего полезного не нашёл, если подскажите в какую сторону копать и что искать, буду очень благодарен :)

Answer 1

[Николай]

Соединить изображения можно либо через canvas, либо используя какие-то библиотеки, на нём основанные.
Для начала почитайте про canvas, в любом случае пригодится.

Answer 2

[TekVanDo]

Смотреть в сторону canvas, объединить можно примерно так.

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"/>');
   }
};