Dropzone в сочетании с Cropper и оверлейным изображением

Question

Я пытаюсь сделать наложение png (водяные знаки или брендинг) поверх файла обрезанной области холста.

Внизу вы можете найти рабочий фрагмент. Код в основном создается путем объединения двух примеров:

https://codepen.io/rikschennink/pen/PXQNGp http://avtokljuci.com/app/_/assets/vendor/cropper/examples/mask-an-image.html

Вместо черного наложения с context.fillRect () я хотел бы сделать наложение с изображением png поверх загруженного обрезанного холста.

Я работал над этим в течение нескольких дней, чтобы добраться до этой точки, но я просто не могу заставить его работать (да, я новичок :-)). Я попытался с image2.onload = function () и context.drawImage (image2), тогда как image2.src является png-файлом на сервере, который является постоянным. Сценарий по-прежнему выполняется без ошибок, если я попробую его таким образом, но сохраненный файл будет пустым.

Любая помощь будет высоко ценится.

Dropzone.autoDiscover = false;
var uploadSizeMax = 1000000;
var uploadSizeTotal = 0;

$('.dropzone').each(function(i, el) {
  var myDropzone = new Dropzone(el, {
    url: '/post',
    dataType: 'json',
    maxFiles: 1,
    uploadMultiple: false,
    acceptedFiles: "image/,image/jpeg,image/jpg,image/gif,image/png",

    transformFile: function(file, done) {

      myDropzone = this;

      var minAspectRatio = 500 / 261;
      var maxAspectRatio = 780 / 407;

      // Create the image editor overlay
      var editor = document.createElement('div');
      editor.style.position = 'fixed';
      editor.style.left = 0;
      editor.style.right = 0;
      editor.style.top = 0;
      editor.style.bottom = 0;
      editor.style.zIndex = 9999;
      editor.style.backgroundColor = '#000';

      // Create the confirm button
      var confirm = document.createElement('button');
      confirm.style.position = 'absolute';
      confirm.style.left = '10px';
      confirm.style.top = '10px';
      confirm.style.zIndex = 9999;
      confirm.textContent = 'Confirm';
      confirm.addEventListener('click', function() {

        function getMaskedCanvas(sourceCanvas, sourceImage, cropper) {

          var context = canvas.getContext('2d');
          var maskWidth = '760';
          var maskHeight = '387';
          var maskTop = '20';
          var maskLeft = '20';
          var imageWidth = cropper.getImageData().naturalWidth;
          var imageHeight = cropper.getImageData().naturalHeight;
          var imageLeft = cropper.getImageData().left;
          var imageTop = cropper.getImageData().top;
          var imageAspect = cropper.getImageData().aspectRatio;

          canvas.width = 780;
          canvas.height = 407;

          context.imageSmoothingEnabled = true;
          context.drawImage(image, 0, 0, imageWidth, imageHeight);
          context.fillRect(maskLeft, maskTop, maskWidth, maskHeight);

          return canvas;

        }

        var maskedCanvas;
        var maskedImage;

        // Get the canvas with image data from Cropper.js
        canvas = cropper.getCroppedCanvas({
          width: 780,
          height: 407
        });

        // Mask
        maskedCanvas = getMaskedCanvas(canvas, image, cropper);

        // Turn the canvas into a Blob (file object without a name)
        canvas.toBlob(function(blob) {

          // Update the image thumbnail with the new image data
          myDropzone.createThumbnail(
            blob,
            myDropzone.options.thumbnailWidth,
            myDropzone.options.thumbnailHeight,
            myDropzone.options.thumbnailMethod,
            false,
            function(dataURL) {

              // Update the Dropzone file thumbnail
              myDropzone.emit('thumbnail', file, dataURL);

              // Return modified file to dropzone
              done(blob);
            }
          );

        });

        // Remove the editor from view
        editor.parentNode.removeChild(editor);

      });
      editor.appendChild(confirm);

      // Load the image
      var image = new Image();
      image.src = URL.createObjectURL(file);
      editor.appendChild(image);

      // Append the editor to the page
      document.body.appendChild(editor);

      // Create Cropper.js and pass image
      var cropper = new Cropper(image, {
        aspectRatio: 780 / 407,
        minCropBoxWidth: 780,
        minCropBoxHeight: 407,
        viewMode: 0,
        guides: false,
        center: true,
        highlight: true,
        cropBoxMovable: true,
        cropBoxResizable: true,
      });
    },

  });
});

<link href="https://unpkg.com/cropperjs/dist/cropper.css" rel="stylesheet"/>
<link href="https://unpkg.com/dropzone/dist/dropzone.css" rel="stylesheet"/>
<script src="https://unpkg.com/dropzone@5.5.1/dist/dropzone.js"></script>
<script src="https://unpkg.com/cropperjs@1.5.1/dist/cropper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<div class="dropzone"> </div>