使用 Javascript 合并图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6765370/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Merge Image using Javascript
提问by footprint.
Is it possible to merge pictures using javascript?
是否可以使用javascript合并图片？
For example, if you have 2 rectangle .jpg or .png images files of the same size, is it possible that you can align it side by side and produce a merged copy of the two in a new .jpg or .png image file?
例如，如果您有 2 个相同大小的矩形 .jpg 或 .png 图像文件，是否可以将它们并排对齐并在新的 .jpg 或 .png 图像文件中生成两者的合并副本？
回答by Hu?nh Qu?c Phong
You can use JavaScript to 'merge' them into one canvas, and convert that canvas to image.
您可以使用 JavaScript 将它们“合并”到一个画布中，然后将该画布转换为图像。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imageObj1 = new Image();
var imageObj2 = new Image();
imageObj1.src = "1.png"
imageObj1.onload = function() {
ctx.drawImage(imageObj1, 0, 0, 328, 526);
imageObj2.src = "2.png";
imageObj2.onload = function() {
ctx.drawImage(imageObj2, 15, 85, 300, 300);
var img = c.toDataURL("image/png");
document.write('<img src="' + img + '" width="328" height="526"/>');
}
};
Due to security, your two images must be on the same domain with your JavaScript file (i.e http://123.com/1.png, http://123.com/2.pngand http://123.com/script.js) otherwise the function toDataURL()will rise an error.
出于安全考虑，您的两个图像必须与您的 JavaScript 文件（即http://123.com/1.png、http://123.com/2.png和http://123.com/script.js）位于同一域中，否则该函数toDataURL()将引发错误。
回答by Alex
Hu?nh Qu?c Phong is partially right:
Hu?nh Qu?c Phong 是部分正确的：
You can use Canvas to merge images. But they can origin from other domains. Just load the pictures in your dom . Once the pictures are loaded (can be checked with javascript, see below) you can use them in your canvas.
您可以使用 Canvas 合并图像。但它们可以来自其他域。只需将图片加载到您的 dom 中。加载图片后（可以使用 javascript 检查，见下文），您可以在画布中使用它们。
var canvas = canvasBuild.getContext('canvasObj');
var img = document.getElementById('mergePic1');
canvas.drawImage(img, 0, 0);
To check if the images were loaded, I would recommend using the jQuery plugin http://desandro.github.io/imagesloaded/- but it can also be done without.
要检查图像是否已加载，我建议使用 jQuery 插件http://desandro.github.io/imagesloaded/- 但也可以不加载。
回答by David Walton
I know this is an old post, but I ran across it searching for a solution to this question, myself. Even moreso, I wanted to be able to upload the images that should be used (without needing to rely on server-side logic).
我知道这是一个旧帖子，但我自己偶然发现了这个问题的解决方案。更重要的是，我希望能够上传应该使用的图像（无需依赖服务器端逻辑）。
I've created a fiddle (http://jsfiddle.net/davidwalton/4pjreyfb/6/) that builds on this:
我创建了一个 基于此构建的小提琴（http://jsfiddle.net/davidwalton/4pjreyfb/6/）：
How to make a simple image upload using Javascript/HTML
如何使用 Javascript/HTML 进行简单的图片上传
I then added Hu?nh Qu?c Phong's logic above (Merge Image using Javascript):
然后我在上面添加了 Hu?nh Qu?c Phong 的逻辑（使用 Javascript 合并图像）：
HTML:
HTML：
<input class="file1" type="file" data-image-selector=".image1" />
<input class="file2" type="file" data-image-selector=".image2" />
<br />
<img class="image1 hidden" alt="medium image 1" />
<img class="image2 hidden" alt="medium image 2" />
<br />
<input class="btn-merge" type="button" value="Merge!" />
<br />
<img class="merged-image hidden" alt="merged image" />
<canvas id="canvas" class="hidden"></canvas>
JS:
JS：
$('.file1, .file2').on('change', function() {
var reader = new FileReader(),
imageSelector = $(this).data('image-selector');
if (this.files && this.files[0]) {
reader.onload = function(e) {
imageIsLoaded(e, imageSelector)
};
reader.readAsDataURL(this.files[0]);
}
});
$('.btn-merge').on('click', merge);
function imageIsLoaded(e, imageSelector) {
$(imageSelector).attr('src', e.target.result);
$(imageSelector).removeClass('hidden');
};
function merge() {
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
imageObj1 = new Image(),
imageObj2 = new Image();
imageObj1.src = $('.image1').attr('src');
imageObj1.onload = function() {
ctx.globalAlpha = 1;
ctx.drawImage(imageObj1, 0, 0, 328, 526);
imageObj2.src = $('.image2').attr('src');;
imageObj2.onload = function() {
ctx.globalAlpha = 0.5;
ctx.drawImage(imageObj2, 15, 85, 300, 300);
var img = canvas.toDataURL('image/jpeg');
$('.merged-image').attr('src', img);
$('.merged-image').removeClass('hidden');
}
};
}
Additionally, it incorporates a bit of transparency just to allow for two jpegs to be utilized.
此外，它结合了一点透明度，以允许使用两个 jpeg。
Note that all image positioning & sizing is managed via the ctx.drawImage()functions. The demo will be ugly, but it should prove the concept. :)
请注意，所有图像定位和大小都是通过这些ctx.drawImage()功能进行管理的。演示会很丑，但它应该证明这个概念。:)
Hopefully this is helpful!
希望这是有帮助的！
回答by kano
Updating this for 2019/2020+: there's an awesome npm package for this called merge-images
为2019/2020+更新这个：有一个很棒的 npm 包，叫做merge-images
And its usage is very simple!
而且它的用法很简单！
import mergeImages from 'merge-images';
mergeImages(['/body.png', '/eyes.png', '/mouth.png'])
.then(b64 => document.querySelector('img').src = b64);
// data:image/png;base64,iVBORw0KGgoAA...
You can further customize it with positioning, opacity (both per-image) and the output's dimensions!
您可以使用定位、不透明度（每个图像）和输出尺寸进一步自定义它！
(Not related to this package in any way, I just wasted 3 days getting html2canvasto work and then found this lifesaver!)
（与此包没有任何关系，我只是浪费了 3 天html2canvas上班然后找到了这个救星！）
回答by Felix Gertz
You could use the Pixastic JavaScript library to combine, filter and blend multiple images. http://www.pixastic.com/lib/docs/actions/blend/
您可以使用 Pixastic JavaScript 库来组合、过滤和混合多个图像。http://www.pixastic.com/lib/docs/actions/blend/
But this is only working in modern Browsers that are supporting the Canvas-element. Unfortunately IE8 is not supporting this.
但这仅适用于支持 Canvas 元素的现代浏览器。不幸的是 IE8 不支持这一点。
