WebRoot/js/grayscale.js

@@ -0,0 +1,310 @@
+/*
+ * -- grayscale.js --
+ * Copyright (C) James Padolsey (http://james.padolsey.com)
+ *
+ */
+
+var grayscale = (function(){
+    
+    var config = {
+            colorProps: ['color','backgroundColor','borderBottomColor','borderTopColor','borderLeftColor','borderRightColor','backgroundImage'],
+            externalImageHandler : {
+                /* Grayscaling externally hosted images does not work
+                   - Use these functions to handle those images as you so desire */
+                /* Out of convenience these functions are also used for browsers
+                   like Chrome that do not support CanvasContext.getImageData */
+                init : function(el, src) {
+                    if (el.nodeName.toLowerCase() === 'img') {
+                        // Is IMG element...
+                    } else {
+                        // Is background-image element:
+                        // Default - remove background images
+                        data(el).backgroundImageSRC = src;
+                        el.style.backgroundImage = '';
+                    }
+                },
+                reset : function(el) {
+                    if (el.nodeName.toLowerCase() === 'img') {
+                        // Is IMG element...
+                    } else {
+                        // Is background-image element:
+                        el.style.backgroundImage = 'url(' + (data(el).backgroundImageSRC || '') + ')';
+                    }
+                }
+            }
+        },
+        log = function(){
+            try { window.console.log.apply(console, arguments); }
+            catch(e) {};
+        },
+        isExternal = function(url) {
+            // Checks whether URL is external: 'CanvasContext.getImageData'
+            // only works if the image is on the current domain.
+            return (new RegExp('https?://(?!' + window.location.hostname + ')')).test(url);
+        },
+        data = (function(){
+            
+            var cache = [0],
+            expando = 'data' + (+new Date());
+            
+            return function(elem) {
+                var cacheIndex = elem[expando],
+                    nextCacheIndex = cache.length;
+                if(!cacheIndex) {
+                    cacheIndex = elem[expando] = nextCacheIndex;
+                    cache[cacheIndex] = {};
+                }
+                return cache[cacheIndex];
+            };
+            
+        })(),
+        desatIMG = function(img, prepare, realEl) {
+            
+            // realEl is only set when img is temp (for BG images)
+            
+            var canvas = document.createElement('canvas'),
+                context = canvas.getContext('2d'),
+                height = img.naturalHeight || img.offsetHeight || img.height,
+                width = img.naturalWidth || img.offsetWidth || img.width,
+                imgData;
+                
+            canvas.height = height;
+            canvas.width = width;
+            context.drawImage(img, 0, 0);
+            try {
+                imgData = context.getImageData(0, 0, width, height);
+            } catch(e) {}
+            
+            if (prepare) {
+                desatIMG.preparing = true;
+                // Slowly recurse through pixels for prep,
+                // :: only occurs on grayscale.prepare()
+                var y = 0;
+                (function(){
+                    
+                    if (!desatIMG.preparing) { return; }
+                    
+                    if (y === height) {
+                        // Finished!
+                        context.putImageData(imgData, 0, 0, 0, 0, width, height);
+                        realEl ? (data(realEl).BGdataURL = canvas.toDataURL())
+                               : (data(img).dataURL = canvas.toDataURL())
+                    }
+                    
+                    for (var x = 0; x < width; x++) {
+                        var i = (y * width + x) * 4;
+                        // Apply Monoschrome level across all channels:
+                        imgData.data[i] = imgData.data[i+1] = imgData.data[i+2] =
+                        RGBtoGRAYSCALE(imgData.data[i], imgData.data[i+1], imgData.data[i+2]);
+                    }
+                    
+                    y++;
+                    setTimeout(arguments.callee, 0);
+                    
+                })();
+                return;
+            } else {
+                // If desatIMG was called without 'prepare' flag
+                // then cancel recursion and proceed with force! (below)
+                desatIMG.preparing = false;
+            }
+            
+            for (var y = 0; y < height; y++) {
+                for (var x = 0; x < width; x++) {
+                    var i = (y * width + x) * 4;
+                    // Apply Monoschrome level across all channels:
+                    imgData.data[i] = imgData.data[i+1] = imgData.data[i+2] =
+                    RGBtoGRAYSCALE(imgData.data[i], imgData.data[i+1], imgData.data[i+2]);
+                }
+            }
+            
+            context.putImageData(imgData, 0, 0, 0, 0, width, height);
+            return canvas;
+        
+        },
+        getStyle = function(el, prop) {
+            var style = document.defaultView && document.defaultView.getComputedStyle ? 
+                        document.defaultView.getComputedStyle(el, null)[prop]
+                        : el.currentStyle[prop];
+            // If format is #FFFFFF: (convert to RGB)
+            if (style && /^#[A-F0-9]/i.test(style)) {
+                    var hex = style.match(/[A-F0-9]{2}/ig);
+                    style = 'rgb(' + parseInt(hex[0], 16) + ','
+                                   + parseInt(hex[1], 16) + ','
+                                   + parseInt(hex[2], 16) + ')';
+            }
+            return style;
+        },
+        RGBtoGRAYSCALE = function(r,g,b) {
+            // Returns single monochrome figure:
+            return parseInt( (0.2125 * r) + (0.7154 * g) + (0.0721 * b), 10 );
+        },
+        getAllNodes = function(context) {
+            var all = Array.prototype.slice.call(context.getElementsByTagName('*'));
+            all.unshift(context);
+            return all;
+        };
+        
+    var init = function(context) {
+        
+        // Handle if a DOM collection is passed instead of a single el:
+        if (context && context[0] && context.length && context[0].nodeName) {
+            // Is a DOM collection:
+            var allContexts = Array.prototype.slice.call(context),
+                cIndex = -1, cLen = allContexts.length;
+            while (++cIndex<cLen) { init.call(this, allContexts[cIndex]); }
+            return;
+        }
+        
+        context = context || document.documentElement;
+        
+        if (!document.createElement('canvas').getContext) {
+            context.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';
+            context.style.zoom = 1;
+            return;
+        }
+        
+        var all = getAllNodes(context),
+            i = -1, len = all.length;
+            
+        while (++i<len) {
+            var cur = all[i];
+            
+            if (cur.nodeName.toLowerCase() === 'img') {
+                var src = cur.getAttribute('src');
+                if(!src) { continue; }
+                if (isExternal(src)) {
+                    config.externalImageHandler.init(cur, src);
+                } else {
+                    data(cur).realSRC = src;
+                    try {
+                        // Within try statement just encase there's no support....
+                        cur.src = data(cur).dataURL || desatIMG(cur).toDataURL();
+                    } catch(e) { config.externalImageHandler.init(cur, src); }
+                }
+                
+            } else {
+                for (var pIndex = 0, pLen = config.colorProps.length; pIndex < pLen; pIndex++) {
+                    var prop = config.colorProps[pIndex],
+                    style = getStyle(cur, prop);
+                    if (!style) {continue;}
+                    if (cur.style[prop]) {
+                        data(cur)[prop] = style;
+                    }
+                    // RGB color:
+                    if (style.substring(0,4) === 'rgb(') {
+                        var monoRGB = RGBtoGRAYSCALE.apply(null, style.match(/\d+/g));
+                        cur.style[prop] = style = 'rgb(' + monoRGB + ',' + monoRGB + ',' + monoRGB + ')';
+                        continue;
+                    }
+                    // Background Image:
+                    if (style.indexOf('url(') > -1) {
+                        var urlPatt = /\(['"]?(.+?)['"]?\)/,
+                            url = style.match(urlPatt)[1];
+                        if (isExternal(url)) {
+                            config.externalImageHandler.init(cur, url);
+                            data(cur).externalBG = true;
+                            continue;
+                        }
+                        // data(cur).BGdataURL refers to caches URL (from preparation)
+                        try {
+                            var imgSRC = data(cur).BGdataURL || (function(){
+                                    var temp = document.createElement('img');
+                                    temp.src = url;
+                                    return desatIMG(temp).toDataURL();
+                                })();
+                            
+                            cur.style[prop] = style.replace(urlPatt, function(_, url){
+                                return '(' + imgSRC + ')';
+                            });
+                        } catch(e) { config.externalImageHandler.init(cur, url); }
+                    }
+                }
+            }
+        }
+        
+    };
+    
+    init.reset = function(context) {
+        // Handle if a DOM collection is passed instead of a single el:
+        if (context && context[0] && context.length && context[0].nodeName) {
+            // Is a DOM collection:
+            var allContexts = Array.prototype.slice.call(context),
+                cIndex = -1, cLen = allContexts.length;
+            while (++cIndex<cLen) { init.reset.call(this, allContexts[cIndex]); }
+            return;
+        }
+        context = context || document.documentElement;
+        if (!document.createElement('canvas').getContext) {
+            context.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)';
+            return;
+        }
+        var all = getAllNodes(context),
+            i = -1, len = all.length;
+        while (++i<len) {
+            var cur = all[i];
+            if (cur.nodeName.toLowerCase() === 'img') {
+                var src = cur.getAttribute('src');
+                if (isExternal(src)) {
+                    config.externalImageHandler.reset(cur, src);
+                }
+                cur.src = data(cur).realSRC || src;
+            } else {
+                for (var pIndex = 0, pLen = config.colorProps.length; pIndex < pLen; pIndex++) {
+                    if (data(cur).externalBG) {
+                        config.externalImageHandler.reset(cur);
+                    }
+                    var prop = config.colorProps[pIndex];
+                    cur.style[prop] = data(cur)[prop] || '';
+                }
+            }
+        }
+    };
+    
+    init.prepare = function(context) {
+        
+        // Handle if a DOM collection is passed instead of a single el:
+        if (context && context[0] && context.length && context[0].nodeName) {
+            // Is a DOM collection:
+            var allContexts = Array.prototype.slice.call(context),
+                cIndex = -1, cLen = allContexts.length;
+            while (++cIndex<cLen) { init.prepare.call(null, allContexts[cIndex]); }
+            return;
+        }
+        
+        // Slowly recurses through all elements
+        // so as not to lock up on the user.
+        
+        context = context || document.documentElement;
+        
+        if (!document.createElement('canvas').getContext) { return; }
+        
+        var all = getAllNodes(context),
+            i = -1, len = all.length;
+        
+        while (++i<len) {
+            var cur = all[i];
+            if (data(cur).skip) { return; }
+            if (cur.nodeName.toLowerCase() === 'img') {
+                if (cur.getAttribute('src') && !isExternal(cur.src)) {
+                    desatIMG(cur, true);
+                }
+                
+            } else {
+                var style = getStyle(cur, 'backgroundImage');
+                if (style.indexOf('url(') > -1) {
+                    var urlPatt = /\(['"]?(.+?)['"]?\)/,
+                        url = style.match(urlPatt)[1];
+                    if (!isExternal(url)) {
+                        var temp = document.createElement('img');
+                        temp.src = url;
+                        desatIMG(temp, true, cur);
+                    }
+                }
+            }
+        }
+    };
+    
+    return init;
+
+})();