var grayscale = (function(){ var config = { colorProps: ['color','backgroundColor','borderBottomColor','borderTopColor','borderLeftColor','borderRightColor','backgroundImage'], externalImageHandler : { init : function(el, src) { if (el.nodeName.toLowerCase() === 'img') { } else { data(el).backgroundImageSRC = src; el.style.backgroundImage = ''; } }, reset : function(el) { if (el.nodeName.toLowerCase() === 'img') { } else { el.style.backgroundImage = 'url(' + (data(el).backgroundImageSRC || '') + ')'; } } } }, log = function(){ try { window.console.log.apply(console, arguments); } catch(e) {}; }, isExternal = function(url) { return (new RegExp('http?://(?!' + 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) { 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; var y = 0; (function(){ if (!desatIMG.preparing) { return; } if (y === height) { 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; 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 { desatIMG.preparing = false; } for (var y = 0; y < height; y++) { for (var x = 0; x < width; x++) { var i = (y * width + x) * 4; 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 (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) { 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) { if (context && context[0] && context.length && context[0].nodeName) { var allContexts = Array.prototype.slice.call(context), cIndex = -1, cLen = allContexts.length; while (++cIndex -1) { var urlPatt = /\(['"]?(.+?)['"]?\)/, url = style.match(urlPatt)[1]; if (isExternal(url)) { config.externalImageHandler.init(cur, url); data(cur).externalBG = true; continue; } 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) { if (context && context[0] && context.length && context[0].nodeName) { var allContexts = Array.prototype.slice.call(context), cIndex = -1, cLen = allContexts.length; while (++cIndex -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; })();