Archive for 2008

ImgAreaSelect 0.6.2

Wednesday, December 24th, 2008

What better present can you get for Christmas than a new release of the imgAreaSelect jQuery plugin?

Uh, ok, I guess you could point out a few examples. Especially that it’s a minor release with no new features, just one fix (canceling the selection now triggers the onSelectChange and onSelectEnd callback functions). But, that’s what you’re going to get from me this year, so enjoy it.

Oh, and…

Merry Christmas Everyone!

ImgAreaSelect 0.6

Monday, November 17th, 2008

Hello, my fellow web developers, it’s time for a new release of your favorite image-area-selecting jQuery plugin — here’s imgAreaSelect 0.6.

This version introduces two new features: keyboard support, which makes it possible to manipulate the selection using arrow keys, and the persistent option, which prevents the user from starting a new selection (so the user can only resize and move the pre-selected area).

The plugin now responds differently to clicking outside the selection area — the current selection is discarded, but a new one is not started until the user begins moving the mouse pointer. This way it’s possible to cancel the selection by clicking in the outer area and not end up with a 0×0 border, as it happened with the previous versions.

Drat, I just noticed a leftover debugging statement (which displayed keyboard codes in window.status) in the newly released version. I removed it and released the updated code as version 0.6.1.

ImgFx New Effects

Tuesday, November 11th, 2008

Here’s a quick update on the imgFx jQuery plugin — I just added two new effects: flip and invert.

This is what flip does:

And here’s invert:

You can play with all the effects on the demo page, as usual.

BrightenUp Greasemonkey Script

Thursday, November 6th, 2008

In my last post, I got somewhat excited about the idea of making a Greasemonkey script that would allow you to adjust the brightness of images on websites. One afternoon a few days ago, having nothing better to do, I wrote the script — and it sort of works. More precisely, it works only on some websites.

The script, like the imgFx plugin, makes use of the canvas HTML element. Among other things, canvas lets us retrieve the image’s pixel data as RGB values. To make an image brighter, we need to read all the pixels, increase their RGB values, and use the new pixel data to redraw the image. Sounds rather simple, but there is one fundamental problem. Due to security restrictions, Firefox will let us read the pixel data only if the image originates at the exact same domain as the website itself. Even if it’s just the sub-domain that is different, it won’t be allowed. So, if you have a website at, but your images come from, the script won’t work with it.

Anyway, in case you’d like to try out the script, here it is: brightenup.user.js

I’ve checked the most popular image hosting websites, and it seems only ImageShack meets the requirement of images originating at the exact same domain as the page on which they appear. Thus, the script is set to execute on * Here’s a sample image that you can test it on (no goatse, and safe for work, I promise):

Move the mouse cursor over the image, and two buttons will pop up in the top left corner. Press “+” and “-” to make the image more or less bright.

Update (Nov 8):
I’ve uploaded the script to for the world to see — there it is.

Brightness Control in imgFx

Friday, October 17th, 2008

The image effects jQuery plugin that I’m working on (or, rather, experimenting with) now supports brightness adjustments — be my guest, go and see the updated demo.

I think this is one feature that could have practical applications — some image hosting websites could add this feature to allow us viewers to quickly brighten up those artsy-fancy photos of naked womenfruits that are always too dark to see all the fine details.

Might be a good idea for a Greasemonkey script, no? I’m definitely going to think about it.

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.

ImgAreaSelect Image Cropping Tutorial

Sunday, August 24th, 2008

Since most people are using the imgAreaSelect plugin to implement image cropping interfaces, and I’ve received a few requests for a fully functional example of such a thing, I planned to write a tutorial on it. But, it seems someone already did this — WebMotionUK has a good article on building a simple tool that allows you to upload an image and crop it, with PHP and imgAreaSelect. So go ahead and read it.

If you have any other interesting examples of using imgAreaSelect, let me know — I’ll be happy to put a link here.

ImgAreaSelect 0.5

Wednesday, August 20th, 2008

As promised, I’m releasing a new version of the imgAreaSelect plugin.

The plugin code has undergone significant reorganization to make it behave properly in some extreme cases — for example, when the image is placed in a scrollable div. I’ve also added a few features that were frequently requested (like an option to set the parent element).

I’m Alive, Honestly

Sunday, July 20th, 2008

It’s been a while (two months, to be precise) since my last post, but I’m not dead, and neither is my blog. I just got somewhat overloaded with work, and had little spare time for my own projects — thus, little to blog about.

Now that most of my large work projects are completed, I’ve finally had some time to update the article on multiple select fields and work on a few additions to the imgAreaSelect plugin that were requested by people (expect a release soon).

  • Archives

  • Categories

  • Meta

  • Latest Tweets

    Warning: Illegal string offset 'last_access' in /usr/local/www/ on line 334

    Warning: Illegal string offset 'time_limit' in /usr/local/www/ on line 334

    Warning: Illegal string offset 'last_access' in /usr/local/www/ on line 336

    Warning: Illegal string offset 'twitter_api' in /usr/local/www/ on line 234

    Warning: Illegal string offset 'user_token' in /usr/local/www/ on line 262

    Warning: Illegal string offset 'user_secret' in /usr/local/www/ on line 263

    Warning: Illegal string offset 'consumer_key' in /usr/local/www/ on line 264

    Warning: Illegal string offset 'consumer_secret' in /usr/local/www/ on line 265

    Warning: Illegal string offset 'twitter_username' in /usr/local/www/ on line 270

    Warning: Illegal string offset 'show_retweets' in /usr/local/www/ on line 272

    Warning: Illegal string offset 'exclude_replies' in /usr/local/www/ on line 275

    Warning: Illegal string offset 'twitter_data' in /usr/local/www/ on line 282

    Warning: Illegal string offset 'twitter_data' in /usr/local/www/ on line 350

    Warning: Illegal string offset 'twitter_data' in /usr/local/www/ on line 351
    Twitter outputted an error:
    Warning: Illegal string offset 'time_format' in /usr/local/www/ on line 484
  • Follow odyniec on Twitter