library JS [crossbrowser resource] : library/imgRotate.js ////////////////////////////////////////////////////// // images rotate() mini library // IE : DXTransform Matrix filter // Firefox/Opera : implementation // ========================================== // written by Gerard Ferrandez // initial version - July 18, 2006 // www.dhteumeuleu.com // modified - July 20 - optional drawImage arguments // modified - July 22 - object functions ////////////////////////////////////////////////////// var images = ""; var canvas = false; var context = false; var isCanvas = (document.createElement("canvas").getContext) ? true : false; createCanvas = function(o) { if (isCanvas) { canvas = document.createElement("canvas"); canvas.style.position = "absolute"; canvas.style.width = nw + "px"; canvas.style.height = nh + "px"; o.appendChild(canvas); context = canvas.getContext("2d"); canvas.resize = function(w, h) { if (canvas) { canvas.width = w; canvas.height = h; canvas.style.width = w + "px"; canvas.style.height = h + "px"; } } return canvas; } else { o.resize = function(w, h) { return false; } return o; } } if (isCanvas) { /* ==== Canvas compatible ==== */ createImage = function(imgsrc, IEext, canvasExt, FilterType) { img = new Image(); img.src = images + imgsrc + "." + ((canvasExt != "") ? canvasExt : IEext); img.sx = 0; img.sy = 0; img.w = 0; img.h = 0; img.loaded = false; img.drawImage = function(x, y, rotation, alpha, sx, sy, w, h) { if (this.complete) { if (!this.loaded) { this.sx = this.width * .5, this.sy = this.height * .5; this.w = this.width, this.h = this.height; this.loaded = true; } if (sx == undefined) sx = this.sx, sy = this.sy; if (w == undefined) w = this.w, h = this.h; context.save(); context.globalAlpha = alpha; context.translate(x, y); context.rotate(rotation); context.drawImage(this, Math.round(-sx), Math.round(-sy), Math.round(w), Math.round(h)); context.restore(); } } return img; } } else { /* ==== IE6/IE7 ==== */ createImage = function(imgsrc, IEext, canvasExt, FilterType) { var o = document.createElement("img"); o.src = images + imgsrc + "." + IEext; o.style.position = "absolute"; o.style.left = "-10000px"; o.style.filter = "progid:DXImageTransform.Microsoft.matrix(FilterType="+FilterType+", sizingMethod=\"auto expand\") alpha(opacity=100)"; o.sx = 0; o.sy = 0; o.w = 0; o.h = 0; o.loaded = false; o.rs = true; o.drawImage = function(x, y, rotation, alpha, sx, sy, w, h) { if (this.complete) { if (!o.loaded) { this.sx = this.width * .5, this.sy = this.height * .5; this.w = this.width, this.h = this.height; o.loaded = true; } if (sx == undefined) sx = this.sx, sy = this.sy; if (w == undefined) this.rs = false, w = this.w, h = this.h; var cos = Math.cos(rotation); var sin = Math.sin(rotation); with (this.filters.item(0)) { M11 = cos; M12 = -sin; M21 = sin; M22 = cos; } with (this.style) { left = Math.round(x - sin * ((sin > 0) ? h-sy : -sy) - cos * ((cos > 0) ? sx : sx-w)) + "px"; top = Math.round(y - sin * ((sin > 0) ? sx : sx-w) - cos * ((cos > 0) ? sy : sy-h)) + "px"; if (this.rs) { width = Math.round(w) + "px"; height = Math.round(h) + "px"; } } this.filters.item(1).opacity = Math.round(alpha * 100); } } canvas.appendChild(o); return o; } } ////////////////////////////////////////////////////////////////////////// -------------------------------------------------------------------------------- My name is Nathalie