如何将两个图像连接在一起？没有任何框架，只有JS答案

【问题标题】：How can I concatenate two images in one? Without any framework, only with JS如何将两个图像连接在一起？没有任何框架，只有JS
【发布时间】：2019-06-05 11:26:24
【问题描述】：

我需要一些代码审查方面的帮助，并将其从 jQuery 重新翻译为纯 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');
    }
  };
}

【问题讨论】：

您可以点击edit然后点击[<>] sn-p编辑器并创建一个minimal reproducible example
我投票结束这个问题作为离题，因为有太多定义广泛的术语/请求。请保持问题针对一个问题。

标签： javascript jquery input ecmascript-6 concatenation

【解决方案1】：

您应该在更改源之前定义 onload，而不是在另一个 onload 中定义

function merge() {
  var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    imageObj1 = new Image(),
    imageObj2 = new Image();

  imageObj1.onload = function() {
    ctx.globalAlpha = 1;
    ctx.drawImage(imageObj1, 0, 0, 328, 526);
  }
  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');
  }
  imageObj1.src = $('.image1').attr('src');
  imageObj2.src = $('.image2').attr('src');
}

【讨论】：