JSFiddle - React, Tailwind, and code Playground

HTML

<p><strong>Этот скрипт удалит водяной знак с картинки, при этом восстановит альфаканал, если он был.</strong><br>
Ватермарка должна быть подогнана по позиции и размеру очищаемого изображения.<br>
Готовое изображение можно сохранить из меню по правому клику.<br>
Для повторного использования нужно обновить страницу.</p>
<p><input type="file" id='upload1' accept="image/*">Сначала открой очищаемое изображение.</p>
<p><input type="file" id='upload2' accept="image/*">Потом открой саму ватермарку.</p>
<canvas id='canvas'>У тебя не будет работать. Обнови браузер.</canvas>

JavaScript

var j = 0, imgd, pix;
document.getElementById('upload1').addEventListener('change', doUpload);

function doUpload(e){
  var file = e.target.files[0];
  if(file){
    var reader = new FileReader();
    reader.onload = function(event){
      canvasLoadImage(event.target.result);
    }
    reader.readAsDataURL(file);
  }
}

function canvasLoadImage(imgData){ 
  var img = new Image();
  img.src = imgData;
  img.onload = function(){
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    canvas.width = img.width;
    canvas.height = img.height;
    context.drawImage(img, 0, 0);
    if (j==0) {
      j++;
      imgd = context.getImageData(0, 0, img.width, img.height);
      pix = imgd.data;
      document.getElementById('upload2').addEventListener('change', doUpload);
    }
    else {
      var imgd2 = context.getImageData(0, 0, img.width, img.height);
      var pix2 = imgd2.data;
      var alfa, beta;
      for (var i = 0, n = pix.length; i < n; i += 4) {
        alfa = 255*(pix[i+3]-pix2[i+3])/(255-pix2[i+3]);
        beta = alfa*(1-pix2[i+3]/255);
        pix[i] = (pix[i]*pix[i+3]-pix2[i]*pix2[i+3])/beta;
        pix[i+1] = (pix[i+1]*pix[i+3]-pix2[i+1]*pix2[i+3])/beta;
        pix[i+2] = (pix[i+2]*pix[i+3]-pix2[i+2]*pix2[i+3])/beta;
        pix[i+3] = alfa;
      }
      context.putImageData(imgd, 0, 0);
    }
  }
}