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

Question

使用 Dropzone.js，我试图通过 createImageThumbnails = false 获取图像的高度和宽度。更准确地说，我不需要在删除图像时创建缩略图，因为当我一次删除许多图像时，这个过程会变得很慢。我只需要扫描所有放置的图像的高度和宽度并将它们保存到数据库中。但问题是，当我关闭缩略图创建时，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();
  }
}