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

【问题标题】：How to embed a small image on top of another image and save it using JavaScript?如何在另一个图像上嵌入一个小图像并使用 JavaScript 保存它？
【发布时间】：2011-12-06 05:12:26
【问题描述】：

我有一个大图像 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实现上述功能？

【问题讨论】：

有趣...我知道 PHP 图像处理库，但我从未在 JavaScript 中见过。很好奇是否也存在这样的事情。
由于 Javascript 是客户端，你不能保存这样的东西。您还需要在 php 或 flash 中做一些工作。
OptimusCrime 有一个很好的观点:)。图像文件可以存储在客户端（例如使用本地存储），但绝对不能自动保存到磁盘上的某个文件 - 用户必须手动保存。

标签： javascript html image tiff

【解决方案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 和 FF 测试）。

【讨论】：