画像を角丸にするJSライブラリ作った

そこそこ早い。
Mathクラスなんてはじめて使ったかも。

image_corner = ( function () {
var curve = 0.3;
curve /= 2;
var radius = curve * 100;
var height_size;
var width_size;
var id_class = 'image_corner';
var rect = new Array( '', '', '', '', '' );
var coner = function ( img, func ) {
var div = img.parentNode;
var clone_img = img.cloneNode( true );
clone_img.style.background = 'transparent';
var r_pow = Math.pow( radius, 2 );
for ( var current = 0; radius >= current; current++ ) {
var new_img = clone_img.cloneNode( true );
div.appendChild( new_img );
var base = Math.abs( Math.floor( Math.sqrt( r_pow - Math.pow( current
|| 1, 2 ) ) ) - radius );
func( current, base );
new_img.style.clip = 'rect( ' + ( rect.join( 'px ' ) ) + ' )';
}
};
var render = function ( org_img ) {
org_img.className += ' ' + id_class;
var img = org_img.cloneNode( true );
var int_or = function ( param ) { return parseInt( img[param] ) ||
parseInt( img.style[param] ); };
height_size = int_or( 'height' );
width_size = int_or( 'width' );
radius = height_size * curve;
var parent_elem = document.createElement( 'div' );
parent_elem.style.position = 'relative';
parent_elem.style.width = width_size + 'px';
parent_elem.style.height = height_size + 'px';
img.style.position = 'absolute';
rect = [ radius, width_size, ( height_size - radius ), 0, '' ];
img.style.clip = 'rect( ' + ( rect.join( 'px ' ) ) + ' )';
var parent = org_img.parentNode;
parent.replaceChild( parent_elem, org_img );
org_img.style.display = 'none';
parent_elem.appendChild( org_img );
parent_elem.appendChild( img );
//top coner
coner( img, function ( current, base ) {
rect[0] = radius - current;
rect[1] = width_size - base;
rect[2] = radius;
rect[3] = base;
} );
//button coner
coner( img, function ( current, base ) {
rect[0] = height_size - radius;
rect[1] = width_size - base;
rect[2] = height_size - Math.abs( current - radius );
rect[3] = base;
} );
};
var clear = function ( elem ) {
var org = ' ' + elem.className + ' ';
var rep = org.replace( ( new RegExp( '\s' + id_class + '\s' ) ), '' );
if ( org == rep ) return;
var parent = elem.parentNode;
parent.parentNode.replaceChild( parent, elem );
};
return {
render : render,
clear : clear,
curve : curve,
id_class : id_class,
dummy:null
};
} )();