Resize image with Silverlight and FJCore before uploading to server

I have a Silverlight application which allows the user to select images from their local PC which are then uploaded to a server via a WCF Service.

It is easy enough to resize the image once it gets to the server, but this would still mean that the full image is being sent over the wire.

In Silverlight 2 there are no built in features that allow us to do the resizing at the client, but it can be achieved using an open source imaging library called FJCore.

To get the FJCore source from Subversion I use an open source plug-in for Visual Studio called AnkhSVN.  It is then possible to build the solution and add a reference to the FJCore library to my own solution.

In my application I allow the user to select multiple files using the OpenFileDialog which are then processed as byte arrays and sent to the server via the WCF Service.  Before doing the upload I am using FJCore to check if the image needs to be resized, and if so resize the image.

The resizing requires the following using statements.

using FluxJpeg.Core;
using FluxJpeg.Core.Decoder;
using FluxJpeg.Core.Filtering;
using FluxJpeg.Core.Encoder;

The following code shows how to use FJCore to take the files selected with the OpenFileDialog and do the resizing before calling the service method to upload to the server.  Here the maximum edge length is 640px, so if width or height is greater than 640px, the resize code is used to resize the maximum edge length to 640px while keeping perspective.


OpenFileDialog ofd = new OpenFileDialog();
ofd.Filter = "JPEG Files (*.jpg;*.jpeg)|*.jpg;*.jpeg";
ofd.Multiselect = true;

if (ofd.ShowDialog().GetValueOrDefault(false))
{
    //The path to upload the files on the server
    string serverPath = "d:\uploads";

    foreach (FileInfo image in ofd.Files)
    {
        FileStream stream = image.OpenRead();
        using (stream)
        {
            byte[] data;
                       
            //Decode image
            DecodedJpeg origJpeg = new JpegDecoder(stream).Decode();

            //Check if the image needs resizing
            if (ImageResizer.ResizeNeeded(origJpeg.Image, 640))
            {
                //Resize image
                DecodedJpeg resizedJpeg =
                    new DecodedJpeg(new ImageResizer(origJpeg.Image).Resize(640, ResamplingFilters.NearestNeighbor), origJpeg.MetaHeaders);

                //Encode resized image
                MemoryStream resizedStream = new MemoryStream();
                new JpegEncoder(resizedJpeg, 100, resizedStream).Encode();

                //Read resized stream to byte array
                resizedStream.Seek(0, SeekOrigin.Begin);
                data = new byte[resizedStream.Length];
                resizedStream.Read(data, 0, Convert.ToInt32(resizedStream.Length));
            }
            else
            {
                //Read original stream to byte array
                stream.Seek(0, SeekOrigin.Begin);
                data = new byte[stream.Length];
                stream.Read(data, 0, Convert.ToInt32(stream.Length));
            }

            //Upload image via service
            GalleryContractClient proxy = new GalleryContractClient();
            proxy.UploadImageCompleted += new EventHandler<uploadImageCompletedEventArgs>(proxy_UploadImageCompleted);
            proxy.UploadImageAsync(serverPath, image.Name, data);
        }
    }
}

Posted on by Joe in Silverlight, WCF

4 Responses to Resize image with Silverlight and FJCore before uploading to server

  1. Alexey

    How fast it working? I found issue with FLCore Decoder. It works very slowly. The decode process takes 10 seconds approximate on 10Mpx image.

  2. Joe

    Hi, it wasn’t quite that slow for me, but it was a little sluggish. I guess if your original images are very large it would take that long.

  3. Mike

    Take a look at the Flash solution from Quadroland. It can resize and rotated images before uploading. Bulk image uploading supported.
    We integrated it to our asp.net based site. Here is the link
    http://quadroland.com/q_imageuploader/

  4. Imran

    try including this:

    #define DYNAMIC_IDCT

    enables optimisations in the fjcore code. much faster.

Add a Comment