Can I filter an image client side, Not server side, using PHP GD Library?

I use Soundcloud for my开发者_JS百科 tracks.

I'm using their jquery player to place a widget on my new site, as you can see on the top right:

The problem is, the waveform Souncloud provides is a one colour only deal:

My goal: To change this waveform PNG from curent colour to black, but client side.

I know I can change things using PHPs GD library, and I've done this successfully with a test image on my server using this code: http://php.net/manual/en/function.imagefilter.php (Search for "IMG_FILTER_BRIGHTNESS")

<?php
$im = imagecreatefrompng('hello.png');

if($im && imagefilter($im, IMG_FILTER_BRIGHTNESS, -255))
{
echo 'Image brightness changed.';

imagepng($im, 'hello.png');
imagedestroy($im);
}
else
{
echo 'Image brightness change failed.';
}
?>

It works perfectly! BUT It changes the actual image on my server! Pretty cool, but not possible...

Obviously I cant change the image on Soundcloud's server (all the data, images, music comes from there API)

So What I'm looking for is a way were I can change the colour of the PNG client side, on the fly. I have a lot of tracks on there, so basically each time the user clicks next or previous, the waveform loads in and before it does it needs to change that image's colour :-?

Is this possible?

To see the player in action on my test site (the styling on that one is old, by the way, but it's functionality is correct) http://marckremers.com/2011/ NB the entire site does not work beyond what you see there. Still a WIP.

Thanks so much

---

This would have to be done client-side using Javascript, either a fully JS solution or one that uses AJAX to send it to PHP, then receives the final image.

You can try the Pixastic JS library: http://www.pixastic.com/lib/docs/#intro

If that doesn't work, I would use jQuery to read the image, send it to a PHP script using JSRS/AJAX and then replace it on the page.