在Dropzone.js中将现有图像显示为裁剪缩略图（并保持纵横比）而不是压缩图像？

Question

当我将图像上传到Dropzone.js时，它们保持纵横比并且只是被裁剪。 他们看起来很好：

当我使用此代码显示以前上传的文件时：

...
         $.getJSON('files/list-all', function(data) {
            $.each(data, function(index, val) {
                var mockFile = { name: val.name, size: val.size };
                thisDropZone.options.addedfile.call(thisDropZone, mockFile);
                thisDropZone.options.thumbnail.call(thisDropZone, mockFile, "uploads/" + val.id + "." + val.extension);
            });
        });
...

我得到了这些图像的压扁版本：

所以问题是如何让缩略图在上传时看起来很好看？

Answer 1

同样的问题，我的解决方法。这不是裁剪效果，而是保持纵横比。它还将图片集中在框架内。

在dropzone创建的'init'选项中实现'fileadded'监听器。然后，调整图像。

步骤：

1. 在预览框中查找IMG元素;
2. 等待加载图像（之前尺寸不可用）;
3. 检索其尺寸;
4. 计算纵横比，假装尺寸和位置;
5. 定义内联css（覆盖css类'dropzone'）。

清单：

var thisDropZone = new Dropzone($("#thisDropZone"), {
    url: "files/upload",
    init: function () {
        this.on("addedfile", function (file) {
            var img = $(file.previewTemplate).find("img");
            img[0].onload = function () {
                var max = this.width > this.height ? this.width : this.height;
                var ratio = 100.0 / max;

                var width = this.width * ratio;
                var height = this.height * ratio;

                img.css({
                    width: width + "px",
                    height: height + "px",
                    top: ((100 - height) / 2) + "px",
                    left: ((100 - width) / 2) + "px"
                });
            };
        }
    }
});

重复出现的幻数“100”是IMG元素的'width'和'weight'属性值，由css类'。dropzone'在其默认样式表'dropzone.css'中定义。

要实现这一点，你不能像你一样调用'addedfile'事件;你必须像这样触发它：

$.getJSON('files/list-all', function(data) {
    $.each(data, function(index, val) {
        var mockFile = { name: val.name, size: val.size };

        thisDropZone.emit("addedfile", mockFile);
        thisDropZone.emit("thumbnail", mockFile, "uploads/" + val.id + "." + val.extension);
    });
});

希望它有所帮助！