Question

我使用http://www.dropzonejs.com/

实施了一个dropzone页面

我在调整大小功能时遇到问题。如果长宽比错误，我的图像会不断裁剪。

我想知道两件事：

我可以配置dropzone以适合（不拉伸或裁剪）pics到预览元素中。
我可以在预览被删除后调整预览（即查看小，中或大的预览。

我已经通过调整css实现了2，但我想知道是否有更好的方法使用dropzone代码。

如果有人有1，那么1的例子会非常有用。谢谢，太

Answer 1

实际上，只有在明确指定选项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函数。它必须返回具有多个属性的对象，如the documentation中所述。以下是根据缩略图尺寸调整预览大小的示例：

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，以使预览看起来像您想要的那样。

Answer 2

是的，你可以。要获得未裁剪的缩略图，您需要做两件事：

在init选项中指定thumbnailWidth和thumbnailHeight。如果你想要固定的高度，如果你想要一个固定的宽度，则传递null作为thumbnailWidth的值，反之亦然。
覆盖dropzone css，如下所示：

.dropzone .dz-preview .dz-image { width：auto！important; 身高：自动！重要; }

Answer 3

不幸的是，在配置中无法指定无裁剪选项，但我设法通过以下方式修改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);

Answer 4

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

{
    thumbnailWidth: null,
    thumbnailHeight: null
}

Dropzone默认调整图片大小。

Answer 5

获取缩放缩略图设置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，用于响应式网站在窄屏幕上缩放图像。

Answer 6

最近发布了Dropzone版本5，因此如果你升级到dropzone 5，那么你可以简单地使用resizeWidth和resizeHeigh压缩你的图像。

如果您只提供其中一个，则dropzone将尊重原始宽高比，例如，如果您只是添加选项： resizeWidth：800

然后您的图像将被压缩到宽度= 800像素，并且您的原始图像的宽高比将得到尊重。

如果你说 resizeWidth：800 resizeHeight：600

然后您的图像将被压缩为800x600像素，具体取决于您的原始宽高比，您的宽度/高度可以被裁剪。

Answer 7

对@ 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;
}

Dropzone调整大小功能

7 个答案: