Блог

Когда я загружаю изображения в 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);
            });
        });
...
  

Я получаю эти сжатые версии изображений:

Итак, вопрос в том, как мне сделать так, чтобы миниатюры выглядели так же, как при загрузке?

Та же проблема, мой обходной путь. Это не эффект обрезки, но сохраняет соотношение сторон. Это также центрирует изображение внутри рамки.

Это достигается путем реализации прослушивателя ‘fileadded’ в опции ‘init’ при создании dropzone. Затем отрегулируйте изображение.

Шаги:

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’ — это значения свойств ‘width’ и ‘weight’ для элемента IMG, как определено классом 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);
    });
});
  

Надеюсь, это поможет!