Dropzone JS - 在所有文件加载后处理文件？

Question

我需要制作 dropzone 以在图像全部加载后对其进行压缩。我尝试使用 queuecomplete 但我一直收到错误。我不知道该把它放在哪里。我用它代替 transformFile 但我的压缩机停止工作了。

你能帮忙吗？

Dropzone.options.myDropzone = {
  url: " ",
  autoProcessQueue: true,
  parallelUploads: 10,
  transformFile: function(file, done) { // i tried queuecomplete HERE
    const imageCompressor = new ImageCompressor();
    imageCompressor.compress(file, {
      checkOrientation: true,
      maxWidth: 8192,
      maxHeight: 8192,
      quality: 0.69,
    }).then((result) => {
      done(result)
    }).catch((err) => {
      throw err
    })
  }
}

Answer 1

尝试

let number_of_files = 0;
//how many files loaded already
let filearr = []
$(function() {
      // Now that the DOM is fully loaded, create the dropzone, and setup the
      // event listeners
      var myDropzone = new Dropzone("#my-dropzone");
      myDropzone.on("success", function(file) {
        number_of_files++
filearr.push(file)
      });
    })
$(function() {
      // Now that the DOM is fully loaded, create the dropzone, and setup the
      // event listeners
      var myDropzone = new Dropzone("#my-dropzone");
      myDropzone.on("success", function(file) {
        number_of_files++
filearr.push(file)
      });
    })
//as many as you wish (or do it in a for loop)
//suppose the number of files you need is x
let x = 10
function flag() {
if(number_of_files == x) {
setTimeout(flag, 100) //checks if complete every 100 milliseconds 
} else {
//compress files here
}

}

Answer 2

所以这是 Dropzone 中的 resize 选项。所以如果你标记 createImageThumbnails : false 那么调整大小功能将不起作用。但如果您将其标记为 true，它将相应地工作。最好的是它已经为您调整图像大小并创建缩略图，因为默认情况下 createImageThumbnails : true .

var options = {
  createImageThumbnails: false,
  url: " ",
  autoProcessQueue: true,
  parallelUploads: 10,
  resize: function(file) {
        var info, srcRatio, trgRatio;
        info = {
          srcX: 0,
          srcY: 0,
          srcWidth: file.width,
          srcHeight: file.height
        };
        srcRatio = file.width / file.height;
        info.optWidth = this.options.thumbnailWidth;
        info.optHeight = this.options.thumbnailHeight;
        if ((info.optWidth == null) && (info.optHeight == null)) {
          info.optWidth = info.srcWidth;
          info.optHeight = info.srcHeight;
        } else if (info.optWidth == null) {
          info.optWidth = srcRatio * info.optHeight;
        } else if (info.optHeight == null) {
          info.optHeight = (1 / srcRatio) * info.optWidth;
        }
        trgRatio = info.optWidth / info.optHeight;
        if (file.height < info.optHeight || file.width < info.optWidth) {
          info.trgHeight = info.srcHeight;
          info.trgWidth = info.srcWidth;
        } else {
          if (srcRatio > trgRatio) {
            info.srcHeight = file.height;
            info.srcWidth = info.srcHeight * trgRatio;
          } else {
            info.srcWidth = file.width;
            info.srcHeight = info.srcWidth / trgRatio;
          }
        }
        info.srcX = (file.width - info.srcWidth) / 2;
        info.srcY = (file.height - info.srcHeight) / 2;
        return info;
      }
};

我正在添加这两个代码，您可以调试代码。希望它能帮助你。您还可以为缩略图添加以下选项。

      maxThumbnailFilesize: 10,
      thumbnailWidth: 120,
      thumbnailHeight: 120,

var options = {
  createImageThumbnails: false,
  url: " ",
  autoProcessQueue: true,
  parallelUploads: 10,
  resize: function(file) {
        var info, srcRatio, trgRatio;
        info = {
          srcX: 0,
          srcY: 0,
          srcWidth: file.width,
          srcHeight: file.height
        };
        srcRatio = file.width / file.height;
        info.optWidth = this.options.thumbnailWidth;
        info.optHeight = this.options.thumbnailHeight;
        if ((info.optWidth == null) && (info.optHeight == null)) {
          info.optWidth = info.srcWidth;
          info.optHeight = info.srcHeight;
        } else if (info.optWidth == null) {
          info.optWidth = srcRatio * info.optHeight;
        } else if (info.optHeight == null) {
          info.optHeight = (1 / srcRatio) * info.optWidth;
        }
        trgRatio = info.optWidth / info.optHeight;
        if (file.height < info.optHeight || file.width < info.optWidth) {
          info.trgHeight = info.srcHeight;
          info.trgWidth = info.srcWidth;
        } else {
          if (srcRatio > trgRatio) {
            info.srcHeight = file.height;
            info.srcWidth = info.srcHeight * trgRatio;
          } else {
            info.srcWidth = file.width;
            info.srcHeight = info.srcWidth / trgRatio;
          }
        }
        info.srcX = (file.width - info.srcWidth) / 2;
        info.srcY = (file.height - info.srcHeight) / 2;
        return info;
      }
};

$( document ).ready(function() {
        $("#mydropzone").addClass("dropzone");
        $("#mydropzonewithresize").addClass("dropzone");
        var myAwesomeDropzone = new Dropzone("#mydropzone",options);
        options.createImageThumbnails=true;
        var mydropzonewithresize = new Dropzone("#mydropzonewithresize",options);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js"></script>
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<p>
  This is the most minimal example of Dropzone. The upload in this example  doesn't work,
</p>
<div id="mydropzone"></div>
<div id="mydropzonewithresize"></div>

Dropzone JS - 在所有文件加载后处理文件？

Dropzone JS - process files after all of them loaded?

javascript

jquery

dropzone