[Question] Is it possible to keep proportions without cropping?

[Maxwell2022]

Using v3.2.0, I'm trying to create an image thumbnail of a certain specific width (800px)

If I specify the width in the image thumbnail: thumbnailWidth: 800 and no height, it's creating a thumbnail of 800x100 and crop it.

If I specify a height it's cropping to this maximum height.

I want the height of the image to be dynamically calculated (according image proportions), is it possible ?

Thanks

[enyo]

At the moment there's no way to do this automatically no. But you can just overwrite the resize function of your dropzone. It receives a file as first parameter, and must return an object like this:

{
  srcX: 0,
  srcY: 0,
  srcWidth: file.width,
  srcHeight: file.height,
  trgWidth: 100,
  trgHeight: 100
}

So you can implement your own resizing function.

I might add a proportionate resizing function in the future though. So if you don't need it immediately it might be worth to wait.

Also: somebody else already implemented the resizing function you are talking about and posted it in the issues somewhere.

[Maxwell2022]

Thanks, I was looking into the resize function but was not sure what was the last 2 parameters of drawImage(). I thought it was the canvas size? is it in percentage?

I'll try to search in the issue for the resize() function.

[Maxwell2022]

For future reference:

I had a look of the resize post #83 but the code is messy and unfortunately it's difficult to see what the author has done really. I'll try to tweak the resize to solve my problem. Here is the explanation of the drawImage() function and its parameters:

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) takes an image, clips it to the rectangle (sx, sy, sw, sh), scales it to dimensions (dw, dh), and draws it on the canvas at coordinates (dx, dy).

Found in a very well explained article about canvas: http://diveintohtml5.info/canvas.html#images

My JS fiddle which resize according the width of the canvas: http://jsfiddle.net/maxwell2022/d5LhY/1/

UPDATE
And to solve my problem, here is the resize() function I'm using:

,
        resize: function(file) {
            var info;

            // drawImage(image, srcX, srcY, srcWidth, srcHeight, trgX, trgY, trgWidth, trgHeight) takes an image, clips it to
            // the rectangle (srcX, srcY, srcWidth, srcHeight), scales it to dimensions (trgWidth, trgHeight), and draws it
            // on the canvas at coordinates (trgX, trgY).
            info = {
                srcX:0,
                srcY:0,
                srcWidth: file.width,
                srcHeight: file.height,
                trgX:0,
                trgY:0,
                trgWidth: this.options.thumbnailWidth,
                trgHeight: parseInt(this.options.thumbnailWidth * file.height / file.width)
            }

            return info;
        },