Dropzone调整大小功能

Question

我已经实现了一个Dropzone页面使用http://www.dropzonejs.com/

我在调整大小功能上遇到了麻烦。如果我的图像宽高比错误，它们会不断被裁剪。

我想知道两件事：

1. 我可以将dropzone配置为将图片（而不是拉伸或裁剪）放入预览元素中吗
2. 我是否可以在预览被删除后调整预览的大小（即查看小型、中型或大型预览）

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

如果有人有一个1的例子，那么它将非常有用。谢谢，马特。

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

Answer 2

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

>

在初始化选项中指定thumnailWidth和thumnailHeight。如果您想要固定的高度，请传递null作为thumnailWidth的值，如果您想要固定的宽度，则反之亦然。

如下所示覆盖dropzone css：

. dropzone. dz-预览. dz-图像{宽度：自动！重要；高度：自动！重要；}

Answer 3

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

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