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.

Navaho

Possible duplicate of Dropzone.js + Client Side Image Resizing – Miscellaneous

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.

Iatry

Answer 2

Yes, you can. To get thumbnails which are not cropped you need to do 2 things:

1. Specify a thumbnailWidth and a thumbnailHeight in the init options. If you want fixed height, pass null as the value for thumbnailWidth or vice versa if you want a fixed width.

2. Override the dropzone css as follows:

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

Goodlooking

Answer 3

Unfortunately there's no way to specify a no-crop option in the config, but I managed to get it done by modifying dropzone.js in the following way, I hope it helps.

This modifications would preserve aspect ratio with a fixed height (you can change it to be width fixed).

Line 1173 replace:

resizeInfo.trgWidth = _this.options.thumbnailWidth;

With this:

resizeInfo.trgWidth = img.width * (_this.options.thumbnailHeight / img.height);

And in line 1182 replace:

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

With this:

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

Xavler

Answer 4

It looks like you can set your options like this:

{
    thumbnailWidth: null,
    thumbnailHeight: null
}

And Dropzone will default on resizing your image.

Chiseler

Answer 5

to get scaled thumbnails set one of thumbnailWidth or thumbnailHeight and the other one as null:

{
  thumbnailWidth: null,
  thumbnailHeight: "120"
}

and apply the following css:

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

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

max-width on img for responsive websites to scale the image on narrow screens.

Murk

Answer 6

A bit of a modification on @Gui-Don answer to keep the aspect ratio of the image.

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

Vergne