Cross-Browser Image Upload & Manipulation

Dan

Dan
Writes on 13th June 2016

Upload and manipulation of images to a website including re-positioning and resizing the image, conversion of the image to grayscale and flipping the image both horizontally and vertically.

Cross-Browser Image Upload & Manipulation 

Client Requirements

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

Due to the restrictions on available technologies we decided on a JavaScript approach to best meet these requirements. With this we could avoid issues across all environments with the exception of those without JavaScript available; in these scenarios we could easily inform the user as to why the system would have limited functionality, and how they could enable JavaScript.

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. 

Challenges 

Image to be manipulated sat behind another image

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.

We used JavaScript to handle Event forwarding of mouse and touch events. Events detected by the png overlay would be handled, interpreted and made applicable to the underlying image, to which they would be fired on. The result of this would be the seamless access to the image behind the overlay.

Intuitiveness over a range of devices.

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.

This resulted in a set of tools being added to the page that could apply manipulation to an image without being limited to dragging and dropping or mouse wheel scrolling. This toolbar had buttons that would handle the zoom and movement of an uploaded image in an obvious and recognisable format. For ease of access and design purposes, other functionality like greyscale and flipping were added to this toolbar.

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.

Multiple images
As future development/extension our client required this system to be able to be applied to multiple elements on a page at the same time, each element being able to have its own set of manipulation applied to it. To achieve this whilst maintaining efficiency we enabled instantiation of the functionality allowing application of manipulation on various elements within a single page. Clicking on an image or uploading a new image would set the toolbar to action on that selected image.


Join the conversation

      

0 comments

Let's contribute!

How about you help us a little and share this page with your friends? It’s just a click, we promise!

Want to get in touch?

Then why don't you? Just click the button bellow and secure your place in our office chair (before you ask... yes, spinning is allowed)!

Get in touch