Как я могу объединить два изображения в одном?Без каких-либо рамок, только с JS

Question

Мне нужна помощь с проверкой кода и повторным переводом его из jQuery в обычный JS.

Я пытался перевести это на чистый JS, но я не понимаю, почему это не работает. При необходимости я могу показать, что я сделал.

1. После того, как пользователь выберет изображение из первого ввода, оно должно быть отображено на холсте.
2. После того, как пользователь выберет изображение из второго ввода, оно должно быть отображено на том же холсте справа от первого изображения.
3. Изображения должны отображаться в масштабе, поэтому две картины будут иметь одинаковую высоту на холсте, но с исходным соотношением сторон.
4. Пользователь может выбирать изображения в любом порядке, но порядок рендеринга должен оставаться прежним: изображение с первого ввода появляется на холсте, а изображение с второго ввода.
5. Входы должны принимать только изображения.

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

Answer 1

Вы должны определить нагрузку до смены источника, а не внутри другой нагрузки

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