如何通过将 createImageThumbnails 设置为 false 在 Dropzone JS 中获取图像尺寸？

Question

使用 Dropzone.js，我尝试使用 createImageThumbnails = false 获取图像高度和宽度。更准确地说，我不需要在删除图像时创建缩略图，因为当我一次删除许多图像时，这个过程会变得很慢。我只需要扫描所有被丢弃的图像的高度和宽度并将它们保存到数据库中。但问题是，当我关闭缩略图创建时，dropzone 不提供图像高度和宽度。根据文档，触发缩略图事件后会提供图像高度和宽度。所以，与我需要的完全相反。因此，作为一种解决方案，我希望能够在图像被放入 dropzone 后立即获得图像高度和宽度信息，并且创建缩略图应该没有延迟。请告知是否有出路。

HTML

<div id="dropzone">
    <form class="dropzone" id = "upload-widget" action = "/demo">
    </form>
</div>

JS

jQuery(document).ready(function($)
{
  var images = Array();

  var item = [];

  Dropzone.options.uploadWidget = {
    autoProcessQueue: false,
    acceptedFiles: 'image/*',
    previewTemplate: '<div class="dz-filename"><span data-dz-name></span></div>',
    createImageThumbnails: false,
    init: function() {
      this.on("addedfile", function(file)
      {
        height = file.height;
        width = file.width;
        item = {Name : file.name, Size:file.size, Height:file.height, Width:file.width};
        images.push(item);
      });
  }
  };

});

Answer 1

您可以尝试使用accept 函数、FileReader() 和Image() 构造函数。

Dropzone.options.uploadWidget = {
  autoProcessQueue: false,
  acceptedFiles: 'image/*',
  previewTemplate: '<div class="dz-filename"><span data-dz-name></span></div>',
  createImageThumbnails: false,
  accept: function(file, done) {

    // FileReader() asynchronously reads the contents of files (or raw data buffers) stored on the user's computer.
    var reader = new FileReader();
    reader.onload = (function(entry) {
      // The Image() constructor creates a new HTMLImageElement instance.
      var image = new Image(); 
      image.src = entry.target.result;
      image.onload = function() {

        console.log(this.width);
        console.log(this.height);

      };
    });

    reader.readAsDataURL(file);
    done();
  }
}