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

时间:2022-11-23 21:18:32

Is possible generate one photo in another dimension than rest thumbnails? So example: first photo should have 200px width and 400px height and next photos should have only 100px width and 200px height.

是否可以在其他维度生成一张照片而不是其他缩略图?例如:第一张照片应该有200px宽度和400px高度,而下一张照片应该只有100px宽度和200px高度。

I have searched only those options for all images:

我只搜索了所有图像的选项:

thumbnailWidth: 100,
thumbnailHeight: 100,

1 个解决方案

#1


0  

You can overwrite the resize function with your own logic and for your first image apply different size

您可以使用自己的逻辑覆盖调整大小功能,并且您的第一个图像应用不同的大小

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

#1


0  

You can overwrite the resize function with your own logic and for your first image apply different size

您可以使用自己的逻辑覆盖调整大小功能,并且您的第一个图像应用不同的大小

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