Category Archives: Php

Whilst being still somewhat of a newcomer to the world of freelance development, it’s already very apparent that the call for services is always heavily affected by online trends both technological and fashionable.

It’s quite understandable, that being the nature of the beast – to be adaptable and reactive, to be able to rapidly assimilate new skills. It’s much simpler for employers to call for contractors who have already worked with a certain platform, rather than channel time and resources into training – neither of which are often in disposable measure.

Recently I’ve taken frequent forays into the Facebook platform, both in the form of Canvas-based applications and Facebook-enabled external sites (what was previously known as Facebook Connect). Both however leveraging the Facebook’s core platform functionality, the Graph API, in strikingly similar ways.

Twice I’ve been tasked with projects that have required building bespoke photo manipulation tools.

Specifically, two (unrelated) applications both offering users the ability to select photos from their Facebook albums, apply some choice or combination of filters, effects or creative imagery and produce a processed image as a result. Awarding them free opportunity to download, share, remix or do whatever they please with the final outcome.

The first was Honda’s CR-Z Mode Art, both a Canvas application and third-party site running from the same code base.

This was Flash-based and applied simple run-time blending modes and colour transformations to a user’s profile image, largely relying on a bank of ready-made illustrated assets (of theme selected by the user) to embellish and augment the picture. Snippets of their profile information were also added.

When deciding upon a methodology for the image processing, I initially suggested that it all be handed to a server to make use a library such as PHP’s GD or ImageMagick.

This would take the weight off the client, both in handling the processing itself and in the delivery of aforementioned asset library. Even with a rudimentary grasp, both offer a much more powerful level of image manipulation than I thought easily achievable with Flash.

But Flash was a must. I recommended using Pixel Bender, mainly for selfish reasons, but also because it offers a complexity of processing down to the pixel level – but that wasn’t an option due to client-imposed restrictions on the Flash Player version.

More recently I was offered a second attempt with a very similar application with Samsung’s Now Project, an entirely PHP-based Facebook Canvas app.

This application offered the user a number of presets to apply to their image, very much along the lines of Hipstamatic – or rather it’s recent successor, Instagram.

Here we made use of GD’s built-in image filter functions, which are really handy.

A lot of the time GD is called upon for the likes of simple image cropping, rotating or resampling. That describes the most of my experience, anyway.

The filter options however offer control over a number of image properties as common as you’d expect in any image editing software, brightness and contrast for example. There’s conversion to grayscale and colour inverting, there’s a colorize method to handle RGB processing, also blur and smoothing options.

All can be used in combination to achieve a wide breadth of results.

In order to create the desired presets, something requiring a more creative eye than mine, I built a custom tool for uploading and processing images on-the-fly so the project designers could tweak and exact filter combination until they found their ideal results. It provided an option to export the settings so I could implement them later.

I’ve recreated that tool in a simpler form here. This one was thrown together very quickly this evening, there are a few images to choose from and a number of settings – it’s all achieved entirely with the GD library. Almost completely untested, not optimised whatsoever – so you’ll have to bear with the waiting time. Have a play!

You get the idea anyway.

GD can be used for watermarking images, often seen applying a transparent PNG to the corner of a picture, say. The same process is used to apply vignettes and overlays of scratches or noise in this example.

It’s really adaptable and still really useful – it hasn’t seen an update since November 2007.

Full source code for the tool is available on GitHub.

I know a pretty little place in Southern California down San Diego way.