我有一个大图像 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来实现上述目标？
如果图像位于同一来源，则可以使用画布。
- 将图像绘制到
canvas
- call canvas.toDataURL() http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-canvas-todataurl检索图像数据
- create
img元素并向其附加数据
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);
如果你想把图像写在[0, 0]坐标那么你就不必使用data-当然是属性。这种方法的问题是，如果文件托管在不同的源上，那么toDataURL会抛出安全错误。
基于：https://stackoverflow.com/a/934925/1011582 https://stackoverflow.com/a/934925/1011582
Note:我想链接 jsfiddle 或 jsbin 示例，但由于同源策略，我无法创建任何看起来合理的示例。有任何想法吗？
THIS http://jsfiddle.net/dzejkej/TuSU9/是我能得到的最好的例子（用 Chrome 和 FF 测试）。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
