Pixenate as an Extensible photo-editing solution for user-generated photo products.

One of Pixenate’s great strengths is its extensibility and the flexibility it provides to website operators. Pixenate is designed first-and-foremost with photo-merchandising in mind. If you own or operate a photo-merchandising website, you know that the process of acquiring and processing user-submitted photos for use in custom products (T-Shirts, Laser etchings, etc) is fraught with peril. Every step the user takes between uploading the photo/s and turning them into custom products, can be a point at which the user just walks away. This can happen if they find the process too cumbersome or complicated or if there are simply too many steps in the process. This results in lost revenue. Streamlining the process of uploading and editing photos to simplify and reduce the number of steps necessary can really help boost revenue and convert casual visitors to paying customers.

Using Pixenate on your photo-merchandising / custom-product website can streamline the process of uploading and editing photos by combining multiple image-editing operations into a single user action. This was really brought home to me in a recent conversation with a customer who operates an online laser etching service. The customer called to talk about his service and explain what he needed. Specifically he need to be able to allow customers to crop (using a fixed aspect ratio) an uploaded photo and then for the photo to also be automatically…

  1. Re-sized to a height and width specified by the website administrator.
  2. Converted to black and white (for laser etching).
  3. Have a diffuse border added (for blending with the product’s surface).

The key requirement was that these steps should happen automatically once the user had chosen the part of the photo they wished to appear on the product. The customer’s main concern was “Can Pixenate do this?”. Because I know Pixenate like the back of my hand I was able to answer “Absolutely – Yes!”. I’m a developer and I knew Pixenate could do this and I knew how it could be done in Pixenate, but I guess I haven’t done a good job of showing just how beneficial Pixenate can be in this kind of scenario. In a nutshell, the customer wanted the process of turning user-submitted photos into laser-etched products to be as simple as possible for the user…

  1. Choose product.
  2. Upload photo.
  3. Crop photo (using a fixed aspect ratio based on product chosen).
  4. Preview end product.
  5. Purchase product.

The difficulty (as the customer saw it) was the work required for steps 3 + 4 since the photo would need to go through some additional processing (conversion to black & white, resizing, diffuse border added) before it could be previewed. It turns out these are exactly the tasks Pixenate does well.
The number one request I hear from customers is (paraphrasing)

“We’d like to combine many of the tools seen at http://pixenate.com/ into a single user task.”

For photo-merchandisers, simplifying the image-editing process is really important – too many options, too many features and the user might never get to purchasing the product. Streamline the editing process, making most of the editing tasks happen automatically and you end up with happy customers who’ve turned their cherished photos into something tangible – something more than pixels on a screen – without having to spend hours laboring in Photoshop.

I hope I’ve gone some way towards explaing what Pixenate can do. Now here comes the science bit…

Pixenate’s API is well documented. There’s an API Reference and Customization Guide with plenty of example code. I didn’t realise until recently that I didn’t have a working example of how to combine more than one image-editing operation into a single user task so I’ve set about doing just that.
Essentially the customer wanted to know if pixenate could turn the photo on the left into the photo on the right in a single step.
dog_bw
You can see a working example of this functionality by clicking here. (By the way – I strongly encourage you to view the source for that web page – you might be surprised by just how little there is)
This is achieved using the PXN8.tool.startTransaction() and PXN8.tools.endTransaction() methods which allow web developers to easily combine multiple image-editing operations into a single atomic user operation. When the user clicks the ‘Crop & Prepare’ button in that example page a prepareImage() function is called…

function prepareImage()
{
    // combine more than one image-editing operation into a single user operation.
    PXN8.tools.startTransaction();
    // [1] crop (user-selected area)
    PXN8.tools.crop();          
    // [2] resize
    PXN8.tools.resize(480,720); 
    // [3] convert to grayscale
    PXN8.tools.grayscale();     
    // [4] add a nice mask (soft edges - this can be changed by supplying a different mask image)
    PXN8.tools.mask({filepath: "images/overlays/feathered_mask.jpg",background_color: "#ffffff"});
    // complete transaction (commit changes)
    PXN8.tools.endTransaction();
    // turn off selection
    PXN8.unselect();
}		


The above JavaScript function performs 4 different image-editing tasks which are bracketed with by PXN8.tools.startTransaction() and PXN8.tools.endTransaction() methods which form the bookends turning all of the tasks between into a single atomic image-editing task.
It’s all well and good providing an API Reference but sometimes working example code is just what you need to dispel those last lingering doubts about what can and can’t be done with Pixenate.

p.s. If you have suggestions for improving the example please leave a comment.

About these ads
Tagged , , , , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: