【问题标题】:dropzone - one picture in another dimensiondropzone - 另一个维度的一张图片
【发布时间】:2016-09-16 10:20:14
【问题描述】:

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

我只搜索了所有图片的这些选项:

thumbnailWidth: 100,
thumbnailHeight: 100,

【问题讨论】:

    标签: javascript html css dropzone.js dimension


    【解决方案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);
    

    【讨论】:

    • 谢谢,但我不知道如何确定第一张图片,那么我应该在“文件”参数中检查什么来检查这是第一张图片?
    • 可以使用this.files.indexOf(file)获取文件的索引,也可以使用文件名(file.name)
    猜你喜欢
    • 2014-07-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-08-05
    • 2011-11-04
    相关资源
    最近更新 更多