如何在另一个图像上嵌入一个小图像并使用JavaScript保存它？ [英] How to embed a small image on top of another image and save it using JavaScript?
问题描述
我有一个大的图像tif格式和两个小图像。
我想要实现的是我想将两个小图像中的任何一个嵌入到一个大的图像，并使用JavaScript保存。
< html>
< body>
< img src =largeimg/>
< p>选择要嵌入大图片中的图片< / p>
< img src =smallimg1/>
< img src =smallimg2/>
< / body>
< / html>
有没有什么办法可以实现上述的使用javascript？
如果图像位于相同的原点，则可以使用canvas。
>
canvas
canvas.toDataURL（） 检索图像数据
img 元素并向其添加数据
示例：
HTML：
< img id =mainsrc =image1/>
< img class =smallsrc =image2data-posx =0data-posy =0/>
< img class =smallsrc =image3data-posx =50data-posy =50/>
< div id =result>< / div>
JavaScript：
函数进程（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] code>坐标，那么你当然不必使用 data - 属性。这种方法的问题在于，如果文件托管在不同的来源，则 toDataURL 会引发安全性错误。
on： https://stackoverflow.com/a/934925/1011582
$ b $注：我想链接jsfiddle或jsbin示例，但由于相同的源策略，我无法创建任何看起来合理的示例。有任何想法吗？
THIS strong>是我能够获得的最好的例子（使用Chrome和FF进行测试）。
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?
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
imgelement 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).
这篇关于如何在另一个图像上嵌入一个小图像并使用JavaScript保存它？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
