如何使用DropZone.js获得质量更好的缩略图？ [英] How do I get better quality thumbnails with DropZone.js?

问题描述

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

  .dropzone-previews .dz-preview .dz-details {
宽度：250px; 
身高：250px; 
头寸：相对; 
背景：#ebebeb; 
填充：5px; 
 margin-bottom：22px; 
} 
  

另一行......

  .dropzone-previews .dz-preview .dz-details img {
 position：absolute; 
 top：0; 
左：0; 
宽度：250px; 
身高：250px; 
} 
  

正如您所料，只有盒子变宽但图像本身被拉伸而模糊。

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

'pre> createImageThumbnails：真，
maxThumbnailFilesize：10，
thumbnailWidth：250，
thumbnailHeight：250，


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

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

关于我做错的任何想法？

解决方案

你可以找到答案，但对于其他人来说，在你的custom.js文件中，将参数传递给dropzone，如下所示：

  Dropzone.options.MyDropZoneForm = {
 thumbnailWidth：250，
 thumbnailHeight：250
}; 
  

MyDropZoneForm - 其表单ID属性。

I'm using DropZone to upload files to my server. The default settings are fine, but the photos are a little small. I decided to go into the dropzone.css file and change the default parameters to 250px x 250 px instead of 100px x 100px:

.dropzone-previews .dz-preview .dz-details {
width: 250px;
height: 250px;
position: relative;
background: #ebebeb;
padding: 5px;
margin-bottom: 22px;
}

And the other line...

.dropzone-previews .dz-preview .dz-details img {
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 250px;
}

As you might expect, only the box got wider but the image itself was stretched and blurry.

Assuming I was being naive by overlooking dropzone.js instead, I opened the file and changed the variables there too:

createImageThumbnails: true,
maxThumbnailFilesize: 10,
thumbnailWidth: 250,
thumbnailHeight: 250,

Still nothing. I want big image thumbnails (250px squares) instead of small, barely recognizable ones (100px squares) but I can't find the parameter that changes this, even though it would seem as if these two files should solve the problem.

Furthermore, the documentation on the website doesn't mention this, even going as far as not including a description on the 'thumbnailWidth' and 'thumbnailHeight' variables because they're presumably self-descriptive.

Any ideas on what I'm doing wrong?

解决方案

Propably you found the answer, but for others, in your custom.js file pass arguments to dropzone like this:

Dropzone.options.MyDropZoneForm = {
  thumbnailWidth:"250",
  thumbnailHeight:"250"
};

MyDropZoneForm - its form id attribute.

这篇关于如何使用DropZone.js获得质量更好的缩略图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！