Question

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

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

以下是它的显示方式： enter image description here

我也试过了：

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

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

Answer 1

我遇到了同样的问题，但是如果你手动调用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);

Answer 2

您可以在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 3

我遇到了类似的问题，并且能够通过更新生成的缩略图的 @EnvironmentObject var global: GlobalObserver return ScrollView { ScrollViewReader { (proxy: ScrollViewProxy) in EmptyView() }.onChange(of: self.global.resetScroll){ resetScroll in if (resetScroll){ proxy.scrollTo(0) self.global.resetScroll = false } } 来修复它。你需要把它放在你的 CSS 中

CSS

说明：问题是图像比 div 更大，并隐藏了图片的其余，因此您最终只看到它的一个角落。

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

3 个答案: