Cross-Browser Image Upload & Manipulation
A website development client based in Tewkesbury required a system that would allow their customers to upload an image and manipulate it in various ways. This manipulation included repositioning and resizing the image, conversion of the image to grayscale and flipping the image both horizontally and vertically. Any manipulation needed to be easily reversible and the system needed to work on all major environments and browsers. This would include mobile devices running iOS and/or Android.
Any manipulation done needed to be maintainable and needed to be able to be reapplied to an image at a later time should the user wish to make changes. The user should be able to save manipulation for future changes, maintaining existing functionality of the client’s current site.
Since we had to consider mobile environments and newer versions of Internet Explorer this meant we had to avoid technologies like Flash and ActiveX. The tool developed also needed to be compatible with older browsers meaning that CSS3 and HTML5 were not an option.
This whole image upload and manipulation system needed to be integrated with the product system inside our Content Management System and needed to be easy to use
What was provided
We’d chosen this approach as it meant we could manipulate images client-side and only spend server resources once the image had been “finished”, keeping both client side wait times and server load to a minimum. During manipulation variables are created and stored persistently, these settings could then be used to restore user manipulation at any point.
Once the user had completed their manipulation they would commit their changes. The system (server side) would use the stored variables to create an image that could be used for print. The resulting image may be cropped, greyscale, flipped and/or resized, this could then be used within print work without further processing required on the image.
We implemented jQuery in to this solution to allow us to easily navigate the DOM and handle events across a range of devices easily. These events would include clicks, mouse movement, and scrolling as well as those specific to touch screen devices (like mobiles).
The final coded solution was less than 28Kb, lightweight enough for download on mobile devices. The solution did not require any further input from the client within the CMS and seamlessly integrated with the product section of CMS:42, without requiring any further knowledge from the client.
One of the requirements of this system is that the image being manipulated would be behind another. Due to the nature of the site, the image to be manipulated sat behind a mask (or overlay), a png image with a transparent area the user submitted image would be positioned.
Because we were catering for a range of devices, including mobile devices, this meant that we needed to implement functionality that felt intuitive to each device. Touch devices, for example, weren’t inherently associated with drag and drop functionality for movement of the image.
The resulting tools were made accessible on all devices so customers familiar with functionality on one device would instantly know how the system would function on any other device. It also helped standardise the design of the site across all environments.