Question

我有一个大图像tif格式和两个小图像。

我想要实现的是，我希望将两个小图像中的任意一个嵌入到大图像之上，并使用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>

有没有办法用javascript实现上述目的？

Answer 1

如果图像位于同一个原点，则可以使用画布。

将图片绘制到canvas
致电canvas.toDataURL()以检索图片数据
创建img元素并向其追加数据

实施例

<强> 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);

如果您想在[0, 0]坐标上书写图像，那么您当然不必使用data-属性。这种方法的问题在于，如果文件托管在不同的源上，那么toDataURL将引发安全性错误。

基于：https://stackoverflow.com/a/934925/1011582

注意：我想链接jsfiddle或jsbin示例，但由于相同的原始策略，我无法创建任何合理的示例。有任何想法吗？

THIS 是我能够获得的最佳示例（使用Chrome＆amp; FF进行测试）。

如何在另一个图像上嵌入一个小图像并使用JavaScript保存？

1 个答案:

实施例