Dropzone.js调整图像大小以适应缩略图 [英] Dropzone.js resize image to fit the thumbnail size

问题描述

我试图调整缩略图中的图片大小以固定框的大小。我已经试过了：

  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'; //强制HTTP响应，响应类型头部为blob 
 xhr.onload = function（）{
 var file = new File（[xhr.response]，'' ，{'type'：xhr.response.type}）; 
 //dropzone.addUploadedFile(file）; 
 dropzone.emit（addedfile，file）; 
 dropzone.emit（ （缩略图），文件，路径）; 
 dropzone.emit（complete，file）; 
}; 
 xhrs.push（xhr）; 
 xhr.send（） ; 
}）; 
 this.options.maxFiles = this.options.maxFiles  -  uploadedImages.count; 
} 
}; 
  

这是原始图片的外观：

I'm trying to resize the image in the thumbnail to fix the box size. I've tried this :

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;
            }
        };

This is the original Image how it looks : http://files.parsetfss.com/12917a88-ac80-4e5e-a009-fc634161b79c/tfss-6c59b59f-8f57-4610-966e-31bbc203707b-samsung-galaxy-note-4-7290-002.jpg

And this is how it's displayed :

Also I've tried :

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

But nothing changed, thumbnailWidth and thumbnailHeight have no effect

解决方案

You can size a new image explicitly in 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 is now resized with proper dimensions.

Also, I just looked at the dropzone.js documentation and this method is probably of use. http://www.dropzonejs.com/#config-resize

这篇关于Dropzone.js调整图像大小以适应缩略图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！