TFileUpload Resize Image on Client Side

[ozelaya]

Hi,

I'm using TFileUpload to upload a image from phone. Is there a way to resize image on client side before upload it to server?

Thanks in advance,

Omar Zelaya

[Alexander Bulei]

Hi ozelaya,

Only one way exists, via javascript and its a complex one.

Sorry.

Best Regards.

[dfields]

Actually, I have used some code to perform an image resize, but it did not always produce the best results. It requires anti-aliasing to produce acceptable results. That's why you find it works best when done in commercial software. I abandoned this approach in favor of proportionally sizing the control in which the image is displayed.

if you are using a TIWImageFile, that would mean setting the AutoSize to false, and the StyleRenderOptions.RenderSize to true. You can then set the Width and Height properties to match the display area using a Height/Width ratio from the original image. This allows you to keep the resolution, but display the image in a different size. I use this all the time in mobile interfaces.

Code: Select all

procedure SomeEvent;
var Jpeg : TJpegImageEx; (uses ccr.exif)
      ratio : double;
      newwidth : integer;
begin
  Jpeg := TJpegImageEx.Create;
  try
    jpeg.LoadFromFile(your file name);
    ratio := Jpeg.Height/Jpeg.Width;
    newwidth :=  ???; //this could be a constant value, or the width of the form...
    IWImageFile1.Width := newwidth;
    IWImageFile1.Height := Trunc(newwidth*ratio);
  finally
    Jpeg.Free;
  end;
end;


[assapan]

Hi dfields , the code you submit is managed by server so this means the entire image as been uploaded to server , question was client side resize before sending to server , i have been searching a lot but could'nt found a satifactory javascript.
i you found a way i'll be interrested in.

About anti-aliasing , i solved the problem by running a firemonkey external software because firemonkey manipulate images easier than vcl .

[assapan]

I also use imagemagick at server side to resize / reframe images

[dfields]

I know that my answer was server side. My point was that doing it client-side is not worth the effort, and you just reinforced my point. There are plenty of tools that provide professional quality image manipulation once you have the image uploaded.

I am saying that you should only resize the images if you have a true need for a smaller image. If you are concerned about uploading images that are too large, you should block them before they are uploaded. If the issue is one of aesthetics, resizing the image control will accomplish the task without straining the device.

I think it is a bad idea to push the resizing off to the client in all cases. You could have a user on a very low level tablet that is capable of running the java script resizing code, but does not have the resources to do so. In which case, it would fail and/or hang up the tablet. The assumption in this question is that you can just find some java script code to resize the image, and it will work everywhere. That is false. The code can execute anywhere java script is supported, but that does not mean the device can handle it.