Dropzone调整大小功能 [英] Dropzone Resize Function

问题描述

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

我在调整大小功能时遇到了麻烦。如果图像的宽高比不正确，则会不断对其进行裁剪。

I am having trouble with the resize functionality. My images are constantly cropped if they are of the wrong aspect ratio.

我想知道两件事：

1. 我可以配置dropzone使其适合（而不是拉伸或裁剪）图片吗？


2. 在删除预览后是否可以调整预览的大小（即查看预览）小，中或大。

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

I have implemented 2 by adjusting the css, but im wondering if there is a better way using the dropzone code.

如果任何人有一个，则1的示例将非常有用。
谢谢，
Matt。

An example of 1 would be very helpful if anyone has one. Thanks, Matt.

推荐答案

实际上，仅当您同时明确指定两个选项 thumbnailWidth 和<$ c时，预览似乎才被裁剪。 $ c> thumbnailHeight ；否则，如果仅指定一个或不指定缩略图尺寸，则根据指定的选项 thumbnailWidth 或 thumbnailHeight 。

Actually, the preview seems to be croped only if you explicitly specify both options thumbnailWidth and thumbnailHeight. Otherwise, if your specify only one or no thumbnail dimension, the whole image is resized proportionally according to the specified options thumbnailWidth or 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的调整大小函数。它必须返回具有多个属性的对象，如文档中所述。以下是根据缩略图尺寸调整预览大小的示例：

However, if you don't know the source image proportions and you need to make your preview fit in a sized div, then use the resize function of dropzone.js. It must return an object with multiple attributes, as it is describe in the documentation. Here is an example to resize the preview according to your thumbnail dimensions:

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

这将导致拉伸预览。
当然，您可以根据源图像的尺寸和大小来确定 trgWidth 和 trgHeight div尺寸或您想要的任何尺寸，以使预览看起来像您想要的。

This will result in a stretch preview. But of course, you can figure out trgWidth and trgHeight according to your source image dimensions, your sized div dimensions or whatever you want in order to make the preview looks like you want.

这篇关于Dropzone调整大小功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！