使用Javascript合并图像

Question

是否可以使用javascript合并图片？

例如,如果您有2个相同大小的矩形.jpg或.png图像文件,是否可以将它们并排对齐并在新的.jpg或.png图像文件中生成两者的合并副本？

Answer 1

您可以使用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"/>');
   }
};

出于安全考虑,您的两个图像必须与您的JavaScript文件位于同一个域(即http://123.com/1.png,http://123.com/2.png和http://123.com/script.js),否则该函数toDataURL()将出现错误.

Answer 2

为2019/2020+更新这个：有一个很棒的 npm 包，叫做merge-images

而且它的用法很简单！

import mergeImages from 'merge-images';
 
mergeImages(['/body.png', '/eyes.png', '/mouth.png'])
  .then(b64 => document.querySelector('img').src = b64);
  // data:image/png;base64,iVBORw0KGgoAA...

您可以使用定位、不透明度（每个图像）和输出尺寸进一步自定义它！

（我和这个包没有任何关系，我只是浪费了 3 天html2canvas上班然后找到了这个救星！）

Answer 3

HuỳnhQuốcPong部分正确:

您可以使用Canvas合并图像.但它们可能来自其他领域.只需在dom中加载图片即可.加载图片后(可以使用javascript查看,见下文),您可以在画布中使用它们.

var canvas = canvasBuild.getContext('canvasObj');
var img = document.getElementById('mergePic1');
canvas.drawImage(img, 0, 0);

要检查图像是否已加载,我建议使用jQuery插件http://desandro.github.io/imagesloaded/ - 但也可以不使用.

Answer 4

我知道这是一个旧帖子，但我自己偶然发现了这个问题的解决方案。更重要的是，我希望能够上传应该使用的图像（无需依赖服务器端逻辑）。

我创建了一个 基于此构建的小提琴（http://jsfiddle.net/davidwalton/4pjreyfb/6/）：

如何使用 Javascript/HTML 进行简单的图片上传

然后我在上面添加了 Hu?nh Qu?c Phong 的逻辑（使用 Javascript 合并图像）：

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：

$('.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');
    }
  };
}

此外，它结合了一点透明度，以允许使用两个 jpeg。

请注意，所有图像定位和大小都是通过这些ctx.drawImage()功能进行管理的。演示会很丑，但它应该证明这个概念。:)

希望这是有帮助的！