Develop Reference

How to colorize a PNG image, cross-browser, using jQuery

I'm trying to do the same as in this question, but more basic: I have a PNG image with only white and transparent as colors. I need to colorize the white part, without touching the transparent part, in a given RGB hex value.
I'd like to do this with a jQuery plugin. Is there any that can do this?
It has to work in the latest versions of all major browser (IE, FF, GC, Safari), with bonus points for lower version support as well.
Example usage
Things I found / thought of already:
Pixastic, but that doesn't have cross-broswer support
CamanJS, but that isn't for jQuery
Overlaying with another div like here, but that would harm the transparent parts
Making the white parts transparent and vice versa, and then use a background-color - but the images are uploaded by the user and this wouldn't make it more user friendly

How about using SVG instead? SVG is supported in all major browsers since IE 9. As a text-based format, it's small, lightweight, and easy to manipulate.
A quick-and-dirty approach is to use SVG-edit (online) or Inkscape (download) to create your drawing, then simply drop the resulting <svg> element onto your HTML page. Here's a fiddle showing how that could work: http://jsfiddle.net/t6fAb/
Better yet, use SVG.js to create the drawing entirely in JavaScript. Here's a fiddle showing how that could work: http://jsfiddle.net/WEL4J/

Cropping images in Javascript (IE)

Is there a way to manipulate an image(crop) using javascript in IE? I know that I can do this with some ActiveX controls. But is there a pure javascript way? May be with filters are any special api provided by Internet Explorer?

It depends upon what you're trying to do. You can use a containing div with overflow set to hidden and a constrained size to clip off any portion of an image and only show a desired crop. If the geometry is known ahead of time, this can be done with pure HTML/CSS. If you need to calculate the size, then sizes, positions and CSS properties can be set with javascript.
Demo: http://jsfiddle.net/jfriend00/QsHy7/

You can use Jcrop with the jQuery library. (info, download page)

You can also take a look at iCropper: http://github.com/supnate/icropper which is a pure javascript image cropping solution. It doesn't depend on any library which makes it fast, light-weight and easy to integrate.

Cross-browser solution to work with SVG files?

What cross-browser JavaScript SVG library will allow me to display and interact with pre-made SVG images.
I know of these libraries:
Raphaël: I'm currently using this along with a SVG loading plugin. But that plugin does not support Inkscape or Adobe Illustrator SVGs (i.e. most SVGs).
cang: This library looks promising, but it requires <canvas> support, which IE doesn't have natively.
svgweb: Another more-promising library. It requires Flash, but most IE users have Flash.
jQuery SVG: It seems to be able to load SVG images, but development seems to have died. And it requires me to use a modified version of jQuery 1.3.
I'm basically trying to make chunks of arbitrary images "selectable".
Any help would be greatly appreciated.

Raphaël does support importing of Illustrator SVGs, through the use of this great plugin. All you have to do is save your ai file as an SVG, open it up using a text editor, copy out the code and import it with the plugin. Works great, except : only supports "path" objects, no text, no gradients, no shadows...

I'm using http://excanvas.sourceforge.net/ for Canvas support in IE and Cang for SVG suport using Canvas.

What you could do is use a combo of cang and svgweb, you could check to see if the browser allows canvases, and if so, load cang and use it. Otherwise check if they have flash, and if so, use svgweb. If they have neither, then tell them to upgrade their browser.
You could read http://ejohn.org/blog/future-proofing-javascript-libraries/ if you are unsure about javascript feature detection.

I'd be tempted to make use of Google Chrome Frame (an IE plug-in). This will save you maintaining two sets of code (one for IE users, another for regular browser users). Adding the following meta-tag to your page will enable SVG to render in IE (via GCF):
<meta http-equiv="X-UA-Compatible" content="chrome=1">
See here for instructions how to detect, and potentially prompt the user to install GCF.

The best solution I've found is to use Raphael along with this tool, which allows you to convert SVG files (generated by Illustrator, in my case) to Raphael code almost as-is. And since Raphael is IE6+ - you could easily be crossbrowsy with some effort on your part.
Here is my example of what can be achieved with a combination of these two things.

Is there a way to get border-radius and gradient backgrounds in IE?

I am wondering if there is any work-arounds using javascript or whatever to get IE to show border-radius or gradient background?

I came across this by looking for fixes to using 'gradients and border-radius' in IE9. And yes while its true you can now use both in IE9, you sadly cannot use them together.
The issue is documented in a a few places:
http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/
http://frugalcoder.us/post/2010/09/15/ie9-corner-plus-gradient-fail.aspx
IE9 border-radius and background gradient bleeding
The issue seems to be related to border-radius not playing nice with IE's old filter gradients. Sadly the release of IE9 did not bring proper CSS gradients.

jquery for at least the radius / corners item.
For gradient backgrounds see this.

You don't need to use jQuery for rounded corners, there are solutions that will make browsers behave well even in the event of javascript being disabled.
Check out http://css3pie.com/, provides a pretty simple solution (htc file) for making this work. As monn indicated IE9 gradient and radius don't work together. Css3Pie is intended to let you dev with css3 markup but provides backups for IE back to IE6.
There's also css3please and compass (for ruby).
This issue has recently been discussed in the HTML5 Boilderplate issue queue (HTML5 Boilerplate is a well-vetted collaboration to bring together the best techniques in modern web markup as a starting point for any platform).
https://github.com/paulirish/html5-boilerplate/issues#issue/354
Here's a demo of the problem & solution:
http://frugalcoder.us/post/2010/09/15/ie9-corner-plus-gradient-fail.aspx

This is quite new: https://github.com/bfintal/jQuery.IE9Gradius.js
Just include the script last in your head tag and it should handle the rest. See readme notes

Can an image be rotated by JavaScript without canvas or AJAX?

I've seen a few JavaScript image rotators that use either the HTML5 canvas element or an AJAX call to a server-side script, but is it possible to do it without using those methods? Internet Explorer doesn't support canvas (I'm aware of excanvas, but I'd like to do without if possible) and I'm not sure if AJAX will be fluid enough. If there is a way, are there any open source scripts, examples, or resources that you could point me to?

Alas, CSS does not support rotating images in any way, shape or form (unless you count CSS Transforms, which are only supported by Safari 4 and Firefox 3.1).
Your best bet is to use Raphael's image() and rotate(), which should support all semi-modern browsers (using SVG) and most versions of IE (using VML).

This jQuery plugin works in major browsers including IE: http://wilq32.googlepages.com/wilq32.rollimage222 . It makes use of excanvas, but at least it allows you to evaluate if that method is good enough for your purposes.

Yes, via CSS Transform:
var degree=180;
document.getElementById('image_name').style.transform='rotate('+degree+'deg)';

Google is your friend:
http://www.walterzorn.com/rotate_img/rotate_img.htm
But the downside of this technique (as mentioned) is that it uses hacks by inserting a huge number of DIVS so it could slow down the browser a good bit. Use with caution. Problems like this are why the canvas tag was created in the first place.