Dropzone.js 为图片上传定义 MinWidth 和 MinHeight答案

【问题标题】：Dropzone.js defining MinWidth and MinHeight for image uploadDropzone.js 为图片上传定义 MinWidth 和 MinHeight
【发布时间】：2019-09-19 13:43:16
【问题描述】：

有没有办法为要上传的图像定义 minWidth 和 minHeight？
如果图像的尺寸低于定义的最小尺寸，它应该显示一个错误，例如与允许的文件类型不对应的图像的默认值，但会说：“你不能上传宽度低于 500 像素的图像” .

我怎么能这样做？

【问题讨论】：

标签： javascript dropzone.js

【解决方案1】：

在他们的页面上，在创建 dropzone 时，您可以指定一个 accept 函数来验证已删除的文件：

Dropzone.options.myAwesomeDropzone = {
  paramName: "file", // The name that will be used to transfer the file
  maxFilesize: 2, // MB
  accept: function(file, done) {
    if (/* Get dimensions and check */) {
      done("Invalid dimensions!");
    }
    else { done(); }
  }
};

至于在上传之前获取高度和宽度，AFAIK 目前最好的方法是创建一个隐藏的 img 标签。参见这个小提琴，例如http://jsfiddle.net/superscript18/nry4h/

【讨论】：

【解决方案2】：

Dropzone.options.myAwesomeDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
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);
if (/* Get dimensions and check */) {
  done("Invalid dimensions!");
}
else { done(); }
}
}

【讨论】：