Dropzone Resize Function

Question

I have implemented a dropzone page using 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.

I am wondering two things:

1. Can i configure dropzone to fit (not stretch or crop) pics into the preview element.
2. Can I resize the previews after they are dropped (ie view the previews small, medium or large.

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

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

Answer 1

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.

Examples, with a 1200x800 image source:

// 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,
}

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

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.