logo标签列表

拖放上传文件控件的调整大小功能

resizedropzone.js
12

我使用http://www.dropzonejs.com/实现了一个拖放区域页面。

我遇到了缩放功能的问题。如果图片宽高比不正确，我的图片会被不断裁切。

我想知道两件事：

  1. 我能否配置dropzone来适应（而非拉伸或裁剪）图片到预览元素中。
  2. 我能否在图片被拖放后调整预览大小（如查看小型、中型或大型预览）。

我已通过调整css来实现第二个问题，但我想知道是否有更好的方法使用dropzone代码。

如果有人拥有第一个问题的示例，将非常有帮助。谢谢， Matt。

1
可能是Dropzone.js + 客户端图片调整大小的重复问题。 - Chris Moschini
6个回答
6
实际上，如果您明确指定thumbnailWidth和thumbnailHeight两个选项，则预览似乎仅被裁剪。否则，如果您仅指定一个或没有缩略图尺寸，则整个图像将按比例调整大小，以符合指定的thumbnailWidth 或 thumbnailHeight选项。

例如，使用1200x800图像源:

// Resized preview (400x267)
var dp = new Dropzone(document.getElementById('dp'), {
    thumbnailWidth: 400,
    thumbnailHeight: null
}

// Resized preview (600x400)
var dp = new Dropzone(document.getElementById('dp'), {
    thumbnailWidth: null,
    thumbnailHeight: 400,
}

// Croped preview (400x400)
var dp = new Dropzone(document.getElementById('dp'), {
    thumbnailWidth: 400,
    thumbnailHeight: 400,
}

然而，如果您不知道源图像的比例并且需要使预览适合指定大小的div，则可以使用dropzone.js的resize函数。它必须返回一个带有多个属性的对象，正如文档中所描述的那样。以下是根据缩略图尺寸调整预览大小的示例：
var dp = new Dropzone(document.getElementById('myDropzone'), {

    // Your dropzone options here...

    thumbnailWidth: 400,
    thumbnailHeight: 400,
    resize: function(file) {
        var resizeInfo = {
            srcX: 0,
            srcY: 0,
            trgX: 0,
            trgY: 0,
            srcWidth: file.width,
            srcHeight: file.height,
            trgWidth: this.options.thumbnailWidth,
            trgHeight: this.options.thumbnailHeight
        };

        return resizeInfo;
    }
});

这将导致一个拉伸预览。 但当然，您可以根据源图像尺寸、大小调整后的div尺寸或任何您想要的尺寸来确定trgWidth和trgHeight，以便使预览看起来符合您的要求。
3

是的，您可以这样做。要获取未裁剪的缩略图，您需要执行以下2个步骤：

  1. 在init选项中指定thumbnailWidth和thumbnailHeight。如果您想要固定高度，请将thumbnailWidth的值设置为null，反之亦然。

  2. 按照以下方式覆盖dropzone css：

    .dropzone .dz-preview .dz-image { width: auto !important; height: auto !important; }

1
很遗憾，配置中没有指定不裁剪选项的方法，但我通过以下方式修改dropzone.js来完成它，希望能有所帮助。
这些修改将保持固定高度的纵横比（您可以将其更改为宽度固定）。 第1173行替换为：
resizeInfo.trgWidth = _this.options.thumbnailWidth;

用这个：
resizeInfo.trgWidth = img.width * (_this.options.thumbnailHeight / img.height);

在第1182行中，替换为：： 
ctx.drawImage(img, (_ref = resizeInfo.srcX) != null ? _ref : 0, (_ref1 = resizeInfo.srcY) != null ? _ref1 : 0, resizeInfo.srcWidth, resizeInfo.srcHeight, (_ref2 = resizeInfo.trgX) != null ? _ref2 : 0, (_ref3 = resizeInfo.trgY) != null ? _ref3 : 0, resizeInfo.trgWidth, resizeInfo.trgHeight);

使用这个:
ctx.drawImage(img, (_ref = resizeInfo.srcX) != null ? _ref : 0, (_ref1 = resizeInfo.srcY) != null ? _ref1 : 0, img.width, img.height, (_ref2 = resizeInfo.trgX) != null ? _ref2 : 0, (_ref3 = resizeInfo.trgY) != null ? _ref3 : 0, resizeInfo.trgWidth, resizeInfo.trgHeight);
0
稍作修改，基于 @Gui-Don 的答案来保持图像的纵横比。
thumbnailWidth: 400,
thumbnailHeight: 400,       
resize: function(file) {

        var thumbNHeight = this.options.thumbnailHeight;
        var thumbNWidth = this.options.thumbnailWidth;

        var ratio = 1;
        if (file.width > file.height) {
            ratio = (file.width / file.height);

            thumbNHeight = thumbNHeight / ratio;

        } else if (file.height > file.width) {

            ratio = (file.height / file.width);

            thumbNWidth = thumbNWidth / ratio;

        }

        var resizeInfo = {
            srcX: 0,
            srcY: 0,
            trgX: 0,
            trgY: 0,
            srcWidth: file.width,
            srcHeight: file.height,
            trgWidth: thumbNWidth,
            trgHeight: thumbNHeight
        };

        return resizeInfo;
}
0

要获取缩略图，请将thumbnailWidth或thumbnailHeight之一设置为null，另一个设置为所需大小：

{
  thumbnailWidth: null,
  thumbnailHeight: "120"
}

并应用以下 CSS：

.dropzone .dz-preview .dz-image {
  width: auto !important;
  height: auto !important;
}

.dropzone .dz-preview .dz-image img{
  max-width: 100%;
}

在响应式网站上使用img的max-width属性，以便在窄屏幕上缩放图像。

0

看起来你可以这样设置选项：

{
    thumbnailWidth: null,
    thumbnailHeight: null
}

而Dropzone会默认调整您的图像大小。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接