Topic: Image resize

I'm looking at using plupload mainly for the image resizing capability.  I notice I can set the width and height but all I need is a max-width and for the height to scale based on the adjusted width.  Does plupload allow this or will it only resize all uploaded images to a fixed width and height?

Re: Image resize

It will only scale it down proportional to the width/height. So these are max width/height. However we don't currently support scaling on only one axis. So you must specify both.

3 (edited by grimble 2010-03-15 14:35:09)

Re: Image resize

Cheers Spocke.  I did have a play about after I posted the question and noticed that it scaled fine for Silverlight and Gears but not for Flash.  I notice though that there was a fix applied a few days ago which sounds like it will resolve this issue.  Do you know when the next release will be?  I'll maybe attempt to rebuild the swf file in the meantime and hope I don't screw it up!

EDIT: Rebuilding the swf worked a treat, cheers!

Re: Image resize

if you know the orientation of the image you're uploading, you can just fix it in javascript before you submit.

I can fix the Actionscript to detect whether the image is portrait or landscape and adjust the dimensions accordingly. I could do it for the C# code as well but I have no way of compiling it again. I'll leave this up to the developers if they decide to implement it.

For now, I handle it in the backend with PHP. It does cost far more bandwidth but I've used the same image resizing code for years so I know it works.

Re: Image resize

While this can easily be implemented manually in JavaScript I think it's such a common use case that Plupload should feature it as part of its core functionality.

Re: Image resize

MarcusT wrote:

While this can easily be implemented manually in JavaScript I think it's such a common use case that Plupload should feature it as part of its core functionality.

Client side image resizing cannot be implemented in Javascript hence why all these uploaders with this feature use Flash or other such runtimes.
Anyway, Plupload already has it built in there was just a bug with Flash which has been fixed in the trunk code.

Re: Image resize

While client side imaging can not be implemented in Javascript, it CAN be used to pass a portrait vs. landscape flag and switch the width vs. height scaling.

Re: Image resize

We support client side scaling of images using HTML5 on Gecko browsers. And WebKit seems to be implementing the W3C File API as well so we will soon add that support for WebKit as well.

9 (edited by Falagard 2010-04-24 06:31:01)

Re: Image resize

It will only scale it down proportional to the width/height.

I don't understand what you mean here. It seems to me if you specify a width of 400 and a height of 300, it'll scale to exactly that as long as the image is larger than 400x300, is that correct? However, let's say your image is 300x400 then what happens - it gets stretched?

I want to allow users to upload only images, and resize them before them are sent to the server to something reasonable like a maximum of 1024 for height or width. I don't know if the user has their image in landscape or portrait, or anything about the ratio of height to width.

Is there currently a way I can do this?

As an example:

If the user has an image that is 1600 width x 1200 height, I want it to be resized to 1024x768 to maintain aspect ratio.

If it is 1000x1600, I want it resized to 640x1024 to maintain aspect ratio.

Thanks

Re: Image resize

A "Longest Side" scaling would be ideal.  It is a simple math formula that should be incorporated to all the runtimes.  If you know the original height and original width, you can get a ratio for your longest side parameter.

ratio = (originalwidth > originalheight) ? longestside / originalwidth : longestside / originalheight;
newwidth = originalwidth * ratio;
newheight = originalheight * ratio;

Re: Image resize

I actually looked into the source code and it keeps same aspect ratio if you pass in equal widths and heights. 

I performed some test by uploading some panoramic images.  It chooses the longest side and then scales from there.  My resize settings were...
resize: { width: 800, height: 800, quality: 100 },

On the server side the output image resulted in a 800*259 image which is what I wanted.  So it appears this issue is mute issue.

Re: Image resize

Right, we'd like an option to scale it down on the shortest side, so the the image contains the bounding box and the bounding box is not fully containing the image. This allows us to crop it ourselves in our own component and only upload what is needed, not much more.