logo标签列表

如何使用JavaScript在另一张图片的顶部嵌入一个小图片并保存？

javascripthtmlimagetiff
3
我有一个大的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中看到过。很好奇是否存在这样的东西。 - Greg Pettit
由于Javascript是客户端的语言，你无法像这样保存任何内容。你需要在php或flash中进行一些工作。 - OptimusCrime
OptimusCrime说得很对：)。图像文件可以存储在客户端上（例如使用localstorage），但绝不能自动保存到磁盘上的某个文件中 - 用户必须手动保存。 - kubetz
1个回答
3
如果这些图片源自相同的来源，则可以使用canvas。
  • 将图片绘制到 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://dev59.com/GXNA5IYBdhLWcg3wgeId#934925 注意：我想链接jsfiddle或jsbin示例，但由于同源策略，我无法创建任何看起来合理的示例。有什么建议吗？ 这个是我能得到的最好的示例（在Chrome和FF中测试过）。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接