Dropzone与Cropper和叠加图像结合使用

Question

我正在尝试在裁剪后的画布dropzone文件顶部制作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>