dropzone - 另一个维度中的一张图片

Question

是否可以在其他维度生成一张照片而不是其他缩略图？例如：第一张照片的宽度应为 200 像素，高度应为 400 像素，而下一张照片的宽度应为 100 像素，高度应为 200 像素。

我只搜索了所有图片的那些选项：

thumbnailWidth: 100,
thumbnailHeight: 100,

Answer 1

您可以用自己的逻辑覆盖 resize function，并为您的第一张图片应用不同的尺寸

var dropzoneSettings = {
    resize: function(file) {
            var info, srcRatio, trgRatio;
            info = {
              srcX: 0,
              srcY: 0,
              srcWidth: file.width,
              srcHeight: file.height
            };
            srcRatio = file.width / file.height;
            info.optWidth = this.options.thumbnailWidth;
            info.optHeight = this.options.thumbnailHeight;
            if ((info.optWidth == null) && (info.optHeight == null)) {
              info.optWidth = info.srcWidth;
              info.optHeight = info.srcHeight;
            } else if (info.optWidth == null) {
              info.optWidth = srcRatio * info.optHeight;
            } else if (info.optHeight == null) {
              info.optHeight = (1 / srcRatio) * info.optWidth;
            }
            trgRatio = info.optWidth / info.optHeight;
            if (file.height < info.optHeight || file.width < info.optWidth) {
              info.trgHeight = info.srcHeight;
              info.trgWidth = info.srcWidth;
            } else {
              if (srcRatio > trgRatio) {
                info.srcHeight = file.height;
                info.srcWidth = info.srcHeight * trgRatio;
              } else {
                info.srcWidth = file.width;
                info.srcHeight = info.srcWidth / trgRatio;
              }
            }
            info.srcX = (file.width - info.srcWidth) / 2;
            info.srcY = (file.height - info.srcHeight) / 2;
            return info;
          }
}
$("#my-dropzone").dropzone(dropzoneSettings);

dropzone - 另一个维度中的一张图片

dropzone - one picture in another dimension

html

javascript

css

dimension

dropzone.js