Archive for September, 2008

Playing with Images in JavaScript

Tuesday, September 30th, 2008

A couple days ago I received an e-mail from an imgAreaSelect user, asking me if it’s possible to blur an image in JavaScript. The question intrigued me, so I Googled around a bit, and came across an interesting image effects library written by Jacob Seidelin. Apart from blurring, it lets you mangle images in a number of other wicked ways — all with just JavaScript. Go and play with the demo to see for yourself.

I thought it would be nice to have a jQuery plugin with similar functionality, especially that jQuery’s chaining would make it possible to combine effects and do things like:

$('img.example').imgFx('blur').imgFx('brightness', {value: 10});

So, I’ve started working on the implementation — there’s not much to see yet, as just the blur effect is working for now, but if you’d like to take a peek, here’s a simple demo. It works in recent versions of Firefox and Opera, and in Internet Explorer 6 or above. That’s because the effects are implemented using canvas, which basically lets you draw inside the browser window and over images, but it’s a new element defined in the upcoming HTML 5 specification, and is not (yet) widely supported.

You might be wondering, since the blur demo works in Internet Explorer 6, does it mean that such a pitiful browser supports the brand new canvas? Actually — no, it does not, and neither does IE7. I’ve heard rumors that canvas is (or will be) supported in IE8, but haven’t seen it for myself. How does the blur demo work in IE then? Well, by using the proprietary implementation of image effects that Microsoft has built into the browser, accessible with the CSS property "filter".

I don’t know if the plugin will turn out useful for any practical purpose and not merely for demonstration, but I’m going to give it a shot anyway and develop it. If you have any ideas on what additional effects or features could be implemented, feel free to leave a comment or send me an e-mail.

ImgAreaSelect 0.5.1

Friday, September 19th, 2008

Version 0.5.1 of imgAreaSelect is out. There was a bug in version 0.5 that caused the selection area to be positioned incorrectly in WebKit-based browsers, and the new version fixes it — so go and grab it if you want your image cropping (or tagging, or whatever) application to work fine in Safari, Konqueror, and the world famous Google Chrome (and a couple others).

By the way, remember the PHP image cropping tutorial I mentioned in my last post? WebMotionUK just published an updated version of it.

  • Archives

  • Categories

  • Meta

  • Latest Tweets


    Warning: Illegal string offset 'last_access' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 334

    Warning: Illegal string offset 'time_limit' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 334

    Warning: Illegal string offset 'last_access' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 336

    Warning: Illegal string offset 'twitter_api' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 234

    Warning: Illegal string offset 'user_token' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 262

    Warning: Illegal string offset 'user_secret' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 263

    Warning: Illegal string offset 'consumer_key' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 264

    Warning: Illegal string offset 'consumer_secret' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 265

    Warning: Illegal string offset 'twitter_username' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 270

    Warning: Illegal string offset 'show_retweets' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 272

    Warning: Illegal string offset 'exclude_replies' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 275

    Warning: Illegal string offset 'twitter_data' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 282

    Warning: Illegal string offset 'twitter_data' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 350

    Warning: Illegal string offset 'twitter_data' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 351
    Twitter outputted an error:
    .
    Warning: Illegal string offset 'time_format' in /usr/local/www/odyniec.net/public/blog/wp-content/plugins/twitget/twitget.php on line 484
  • Follow odyniec on Twitter