Javascript Dropzone.js调整图像大小以适应缩略图大小
我正在尝试调整缩略图中的图像大小,以固定框的大小。我试过这个:Javascript Dropzone.js调整图像大小以适应缩略图大小,javascript,jquery,html,css,dropzone.js,Javascript,Jquery,Html,Css,Dropzone.js,我正在尝试调整缩略图中的图像大小,以固定框的大小。我试过这个: Dropzone.options.myAwesomeDropzone = { maxFiles: 20, maxFilesize: 2, maxThumbnailFilesize: 20, acceptedFiles: 'image/*,.jpg,.png,.jpeg', thumbnailWidth:"250",
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;
}
};
这是原始图像的外观:
这就是它的显示方式:
我也试过:
thumbnailWidth:"300",
thumbnailHeight:"300",
===
thumbnailWidth:"400",
thumbnailHeight:"400",
但是没有任何改变,
缩略图宽度和缩略图高度
没有任何影响您可以用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文档,这个方法可能很有用 我也有同样的问题,但是如果手动调用dropzone的resize功能,Thumnail的尺寸将正确:
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);
我有一个类似的问题,并且能够通过更新生成的缩略图的
CSS
来修复它。你需要把这个放到你的CSS中
.dz-image img{
width: 130px;
height:130px;
}
说明:
问题是,图像比div大,并且隐藏了图片的其余部分,因此你只能得到它的一角。谢谢这个解决方案,但我想使用库的
thumbnailWith和thumbnailHeight…
谢谢,添加方法调用“createThumbnailFromUrl”帮了我的忙。可能是