Home/ Questions/Q 6897391
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T07:09:48+00:00

I have a large image tif format and two small images. What I wanted

  • 0

I have a large image tif format and two small images.

What I wanted to achieve is that I want to embed either of the two small images on top of a large image and save it using JavaScript.

 <html>
    <body>
        <img src="largeimg" />
        <p>Select the image to embed on the large image</p>
        <img src="smallimg1" />
        <img src="smallimg2" />
    </body>
 </html>

Is there any way to achieve the above using javascript?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If the images are on the same origin the it is possible to use canvas.

    • draw images to canvas
    • call canvas.toDataURL() to retrieve the image data
    • create img element and append data to it

    Example:

    HTML:

    <img id="main" src="image1" />
<img class="small" src="image2" data-posx="0" data-posy="0" />
<img class="small" src="image3" data-posx="50" data-posy="50" />
<div id="result"></div>

    JavaScript:

    function process(main, rest) {
  var canvas = document.createElement("canvas");
  canvas.width = main.width;
  canvas.height = main.height;

  var ctx = canvas.getContext("2d");
  ctx.drawImage(main, 0, 0);

  for (var i = 0; i < rest.length; i++) {
    var img = rest[i];
    ctx.drawImage(img, img.getAttribute("data-posx"), img.getAttribute("data-posy"));
  }

  return canvas.toDataURL("image/png");
}

var img = document.createElement("img");
img.src = process(document.getElementById("main"),  document.getElementsByClassName("small"));
document.getElementById("result").appendChild(img);

    If you want to write the image on [0, 0] coordinates then you don’t have to use data- attributes, of course. Problem with this approach is that if the files are hosted on different origin then toDataURL will throw security error.

    Based on: https://stackoverflow.com/a/934925/1011582

    Note: I would like to link jsfiddle or jsbin example but because of the same origin policy I cannot create any reasonably looking example. Any ideas?

    THIS is the best example I was able to get (tested with Chrome & FF).

    • 0