Feedback on PaintbrushJS

I'm working on a client-side image processing library, prospectively named PaintbrushJS. 
I plan to develop in the open on GitHub, there are just a few loose ends to clean up 
before I push the initial source. This is the biggie, since I don't want to change it 
after I make a decision.

It would be helpful to read my description and subsequent comments on here to get the 
gist of the problem:

http://dribbble.com/shots/45454-Canvas-Effects

My question is the best way to pass filter arguments to the script, assuming I want to 
do that at the markup level. Currently I have an init script that defines things like 
noise amount and colour tint RGB value, but ideally I'd like to do it in markup, as 
attributes of the elements I'm manipulating. I think my options basically come down to 
classes and data- attributes.

An example. The noise filter requires two additional parameters, a string to specify 
mono/colour, and an integer between 0 and 100 to control amount. Both ways could work:

<img src="lighthouse.jpg" class="filter-noise noise-mono noise-amount-50">

<img src="lighthouse.jpg" class="filter-noise" data-noise-type="mono" data-noise-amount="50">

Though more verbose, it feels like the second is the "right" way, and will be easier 
to parse. Am I correct in this thinking? Am I overlooking anything? Is there a third, 
better way I'm not aware of?

There's a third way (but not necessarily better in any way): use URL parameters in the src attribute and parse them. The most obvious downside (or perhaps upside in some cases) is they get sent to the server. Just throwing it out there.

-1 on the classes. With CSS3 selectors, any benefit you might expect to get from them no longer applies...

I first thought of data-* too, but this could get very repetitive... and it's presentation information.

Why not supply two ways to use this... data-* attributes AND a json file somewhere in the global scope. Something similar to behavior.js, like so:

var paintbrushfx = [
{ which: 'img.fx-bw', what: 'noise', args: { mono: true, ammount: 50 } },
{ which: '#list img', what: 'blackandwhite' },
{ which: '#list img:hover', what: 'normal' }
];

Extra points if you manage to support :hover and other basic interactions... but see? It would have to be a way to go back to normal (ie, original).

Data Attributes are the right way to go, or pure JavaScript.

+1 for data attributes or something similar to jQuerys $.data();

Dave, I've been going over this in my head...

I believe a simple parser could be written (I've made an attempt in firebug and worked) to achieve that JSON object from a css-like file:

img.fx {
noise: amount=50, mono;
black-and-white;
};

into:

[
{ which: 'img.fx', fx: [ { what: 'noise', args: { mono: true, amount: 50 } }, { what: 'black-and-white' } ]
]

This would make it super-simple for webdesigners to use this. Instead of making them know javascript, they would only have to pick up a syntax similar to css...

Best of both worlds I think. I'm writing it as data- attributes that create a JSON config object, and it's working swimmingly. Swapping out for a literal JSON file later will be cake.

Thanks all for the help!

Awesome, Dave. Writing a parser from the example I gave to your json object will also be possible. Even if not in the vanilla package, I can write it for myself.

Looking forward to seeing this in action! :-D

(ps: think of sprites... it might be helpful.)

Oh yeah, should probably mention here that the library is now public: http://github.com/mezzoblue/PaintbrushJS