Resizing Images With JavaScript

One of my current projects is a mobile web application that allows users to upload receipts to an expense reporting system. We are using Telerik's ASP.NET AsyncUpload control. Overall, the control works great and provides a lot of great features out of the box like client side file validation and an upload progress indicator. The issue we found is that over a 3G connection the file would usually take 30-45 seconds to upload due to the large images produced by our testing phones (iPhone 5 & 5s). Our first goal is to create the best user experience posible and to make creating expenses as quick and painless as possible. We needed to find a way to get the images uploaded faster.

There are plenty of native mobile apps out there for manipulating and resizing images but we didn't want to add the extra steps and hassle of adding an additional application to the process. Luckily the HTML5 File API was able to come to our rescue.

Here is a list of tools and libraries we used to accomplish our goal:

  • HTML5 File API - provides support for manipulating images on the client side and is supported by most modern browsers
  • iOS-ImageFile-MegaPixel - JavaScript library that fixes rendering issues with large images in iOS link
  • Exif.js - JavaScript library for reading exif data from images link

Here is the markup for the ASP.NET components. Note that most of the code below would also work with ASP.NET Async File Upload control.

This is where the cool stuff happens. You just read the image into a variable and rewrite the image to a canvas element and then store the data url from the canvas element into a hidden field. The MegaPixel and Exif libraries are used because of an iOS issue that causes images over 1MB to become skewed when written to a canvas element.

Finally, on the server side we retrieve the Base64 encoded string from the hidden field and convert it to a byte array and save it to the file system.

Overall the results have been excellent. Before implementing this conversion process, jpegs uploaded from the iPhone averaged around 2.5 MB and took over 30 seconds to upload over a 3G connection. Now they are around 80 KB and they take just a couple of seconds to upload. This creates a much better experience for our users and also saves space on the server. One thing to note is that the converted image quality is decent but not on par with desktop photo editing software. So I would recommend using this technique in situations where image quality is not a huge concern.

comments powered by Disqus