如何使用DropZone.js获得质量更好的缩略图?

Isa*_*kew 9 css image dropzone.js

我正在使用DropZone将文件上传到我的服务器.默认设置很好,但照片有点小.我决定进入dropzone.css文件并将默认参数更改为250px x 250 px而不是100px x 100px:

.dropzone-previews .dz-preview .dz-details {
width: 250px;
height: 250px;
position: relative;
background: #ebebeb;
padding: 5px;
margin-bottom: 22px;
}
Run Code Online (Sandbox Code Playgroud)

另一条线......

.dropzone-previews .dz-preview .dz-details img {
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 250px;
}
Run Code Online (Sandbox Code Playgroud)

正如您所料,只有盒子变得更宽,但图像本身却变得模糊不清.

假设我通过忽略dropzone.js而天真,我打开文件并在那里更改了变量:

createImageThumbnails: true,
maxThumbnailFilesize: 10,
thumbnailWidth: 250,
thumbnailHeight: 250,
Run Code Online (Sandbox Code Playgroud)

依然没有.我想要大图像缩略图(250px正方形)而不是小的,几乎不可识别的(100px正方形)但我找不到改变它的参数,即使看起来好像这两个文件应该解决问题.

此外,网站上的文档没有提到这一点,甚至不包括对'thumbnailWidth'和'thumbnailHeight'变量的描述,因为它们可能是自我描述性的.

关于我做错了什么的任何想法?

mal*_*olm 17

您可以找到答案,但对于其他人,在您的custom.js文件中将参数传递给dropzone,如下所示:

Dropzone.options.MyDropZoneForm = {
  thumbnailWidth:"250",
  thumbnailHeight:"250"
};
Run Code Online (Sandbox Code Playgroud)

MyDropZoneForm - 它的表单id属性.