Dropzone.js调整图像大小以适合缩略图大小

我正在尝试调整缩略图中的图像大小以修复框大小。 我试过这个：

Dropzone.options.myAwesomeDropzone = { maxFiles: 20, maxFilesize: 2, maxThumbnailFilesize: 20, acceptedFiles: 'image/*,.jpg,.png,.jpeg', thumbnailWidth:"250", thumbnailHeight:"250", init: function() { var dropzone = this, xhrs = []; $.each(uploadedImages, function (index, path) { var xhr = new XMLHttpRequest(); xhr.open('GET', path); xhr.responseType = 'blob';//force the HTTP response, response-type header to be blob xhr.onload = function() { var file = new File([xhr.response], '', {'type': xhr.response.type}); //dropzone.addUploadedFile(file); dropzone.emit("addedfile", file); dropzone.emit("thumbnail", file, path); dropzone.emit("complete", file); }; xhrs.push(xhr); xhr.send(); }); this.options.maxFiles = this.options.maxFiles - uploadedImages.count; } }; 

这是原始图像的外观： http ： //files.parsetfss.com/12917a88-ac80-4e5e-a009-fc634161b79c/tfss-6c59b59f-8f57-4610-966e-31bbc203707b-samsung-galaxy-note-4-7290 -002.jpg

这就是它的显示方式：

我也尝试过：

 thumbnailWidth:"300", thumbnailHeight:"300", === thumbnailWidth:"400", thumbnailHeight:"400", 

但没有任何改变， thumbnailWidth and thumbnailHeight没有任何效果

Answer 1

您可以在javascript中显式调整新图像的大小。

 var img = new Image(); img.src = 'http://files.parsetfss.com/12917a88-ac80-4e5e-a009-fc634161b79c/tfss-6c59b59f-8f57-4610-966e-31bbc203707b-samsung-galaxy-note-4-7290-002.jpg'; img.height = 300; img.width = 300; 

现在使用适当的尺寸调整img的大小。

另外，我只看了dropzone.js文档，这个方法可能有用。 http://www.dropzonejs.com/#config-resize

Answer 2

我遇到了同样的问题，但是如果你手动调用dropzone的resize函数，那么thumnails将是正确的尺寸：

 var file = new File([xhr.response], '', {'type': xhr.response.type}); dropzone.createThumbnailFromUrl(file,path); dropzone.emit("addedfile", file); dropzone.emit("thumbnail", file, path); dropzone.emit("complete", file);