2

我将Dropzonejs与Cropperjs一起使用。当前流程是选择图像，裁剪并保存。

在此处输入图像描述

我想选择一个图像并给用户两个选项

1）裁剪然后保存

2）取消裁剪并保存而不裁剪。

第一个选项在cropperjs 中默认可用。但是如何添加一个cancel按钮，该按钮应该将图像发送到 dropzone 而无需裁剪。简而言之，我想要 dropzone 中的原始选定图像。

Dropzone JS 配置代码：

Dropzone.autoDiscover = false;
// Dropzone Configurations
var dropzone = new Dropzone('#story-thumbnail-dropzone-upload', {
  parallelUploads: 1,
  thumbnailHeight: 120,
  thumbnailWidth: 120,
  // Number of Files to allow for UPLOAD
  maxFiles:1,
  init: function() {
        this.on("maxfilesexceeded", function(file) {
              this.removeAllFiles();
              this.addFile(file);
        });
  },
  transformFile: function(file, done) {

        var myDropZone = this;

        // 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 = 'Crop';
        confirm.addEventListener('click', function() {

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

            // 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: 1
        });

    },
  filesizeBase: 1000,
  thumbnail: function(file, dataUrl) {
    if (file.previewElement) {
      file.previewElement.classList.remove("dz-file-preview");
      var images = file.previewElement.querySelectorAll("[data-dz-thumbnail]");
      for (var i = 0; i < images.length; i++) {
        var thumbnailElement = images[i];
        thumbnailElement.alt = file.name;
        thumbnailElement.src = dataUrl;
      }
      setTimeout(function() { file.previewElement.classList.add("dz-image-preview"); }, 1);
    }
  }
});

HTML：

<div class="dropzone needsclick" id="story-thumbnail-dropzone-upload" action="/admin/upload-story-thumbnail">
  <div class="dz-message needsclick">
    Drop files here or click to upload.<BR>
  </div>
</div>
4

1 回答 1

4

您当然可以通过轻松地将原始文件保存在全局变量中来做到这一点，然后在取消按钮上的单击事件时将其传递到 dropzone。我已经修改了代码并为你做了。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/4.0.0/cropper.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.1/cropper.min.js"></script>
</head>
<body>
  <div class="dropzone needsclick" id="story-thumbnail-dropzone-upload" action="/admin/upload-story-thumbnail">
    <div class="dz-message needsclick">
    Drop files here or click to upload.<BR>
    </div>
  </div>
</body>
</html>
  
<script>
var originalFile = null;
Dropzone.autoDiscover = false;
// Dropzone Configurations
var dropzone = new Dropzone('#story-thumbnail-dropzone-upload', {
    parallelUploads: 1,
    thumbnailHeight: 120,
    thumbnailWidth: 120,
    // Number of Files to allow for UPLOAD
    maxFiles: 1,
    init: function() {
        this.on("maxfilesexceeded", function(file) {
            this.removeAllFiles();
            this.addFile(file);
        });
    },
    transformFile: function(file, done) {
      
      originalFile = file;

        var myDropZone = this;

        // Create the image editor overlay
        var editor = document.createElement('div');
        editor.classList.add('cropCanvas');
        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.left = '10px';
        confirm.style.top = '10px';
        confirm.style.zIndex = 9999;
        confirm.textContent = 'Crop';
        confirm.addEventListener('click', function() {

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

            // 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);
                      console.log(blob);
                    }
                );

            });

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

        });
        
        // Create the cancel button
        var cancel = document.createElement('button');
        cancel.style.position = 'absolute';
        cancel.style.left = '50px';
        cancel.style.top = '0px';
        cancel.style.zIndex = 9999;
        cancel.textContent = 'Cancel';
        cancel.style.position = 'absolute';
        cancel.addEventListener('click', function() {

         done(originalFile);

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

        });
        editor.appendChild(confirm);
        editor.appendChild(cancel);

        // Load the image
        var image = new Image();
        image.src = URL.createObjectURL(file);
        // Just added width for not having extra space to show the image in a limited available space
        // REMOVE THIS THEN!!!!
        image.width = '500px';
        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: 1
        });

    },
    filesizeBase: 1000,
    thumbnail: function(file, dataUrl) {
        if (file.previewElement) {
            file.previewElement.classList.remove("dz-file-preview");
            var images = file.previewElement.querySelectorAll("[data-dz-thumbnail]");
            for (var i = 0; i < images.length; i++) {
                var thumbnailElement = images[i];
                thumbnailElement.alt = file.name;
                thumbnailElement.src = dataUrl;
            }
            setTimeout(function() {
                file.previewElement.classList.add("dz-image-preview");
            }, 1);
        }
    }
});
</script>

于 2019-05-31T21:17:07.640 回答