Created
April 30, 2010 09:54
-
-
Save negipo/385014 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name DegradeTwitterIcons | |
| // @namespace http://polog.org/ | |
| // @include http://twitter.com/* | |
| // @require http://gist.github.com/3242.txt | |
| // ==/UserScript== | |
| // using $X http://gist.github.com/3242 by os0x | |
| const SQUARE_SIZE = 8; | |
| GM_addStyle( | |
| [ | |
| "#content h2.thumb canvas {margin-right:10px;vertical-align:middle;}", | |
| ".profile-user h2 canvas {float:left;}" | |
| ].join("\n") | |
| ); | |
| function init(doc){ | |
| $X('.//img[contains(concat(" ",normalize-space(@class)," "), " photo fn ")] | .//a[contains(@class, "profile-pic")]/img', doc).forEach(function(img){ | |
| try{ | |
| base64ize(img, function(){degrade(img);}); | |
| } catch (e) { | |
| log(e); | |
| } | |
| }); | |
| } | |
| function degrade(img){ | |
| var canvas = document.createElement('canvas'); | |
| var context = canvas.getContext("2d"); | |
| var _img = new Image(); | |
| _img.src = img.src; | |
| log(img.src); | |
| context.drawImage(_img, 0, 0, 48, 48); | |
| var target_canvas = document.createElement('canvas'); | |
| var target_context = target_canvas.getContext("2d"); | |
| log('drawn'); | |
| img.parentNode.appendChild(target_canvas); | |
| img.parentNode.removeChild(img); | |
| for(var x = 0 ; x < 48; x += SQUARE_SIZE){ | |
| for(var y = 0 ; y < 48; y += SQUARE_SIZE){ | |
| var _x, _y, offset_x, offset_y; | |
| [_x, _y, offset_x, offset_y] = (Math.random() > 0.5) ? | |
| [x, y + (SQUARE_SIZE / 2), (SQUARE_SIZE / 2 + 1), 0] : | |
| [x + (SQUARE_SIZE / 2), y, 0, (SQUARE_SIZE / 2 + 1)]; | |
| log(['sample', _x, _y, 1, 1].join(',')); | |
| var _begin_color = colorize(context.getImageData(_x, _y, 1, 1)); | |
| var _end_color = colorize(context.getImageData(_x + offset_x, _y + offset_y, 1, 1)); | |
| log('color' + _begin_color); | |
| var gradation = target_context.createLinearGradient(_x, _y, _x + offset_x, _y + offset_y); | |
| gradation.addColorStop(0, _begin_color); | |
| for(var i = 1; i <= 3; i++){ | |
| var offset_ratio = i / 4; | |
| if(Math.random() > 0.9){ | |
| var color = colorize(context.getImageData(_x + (offset_x * offset_ratio), _y + (offset_y * offset_ratio), 1, 1)); | |
| gradation.addColorStop(offset_ratio, color); | |
| } | |
| } | |
| gradation.addColorStop(1, _end_color); | |
| target_context.fillStyle = gradation; | |
| target_context.fillRect(x, y, SQUARE_SIZE, SQUARE_SIZE); | |
| log(['render', x, y, x+3, y+3].join(",")); | |
| log('---------'); | |
| } | |
| } | |
| context.restore(); | |
| } | |
| // from glitchmonkey, modified | |
| function base64ize(element, after_func) { | |
| GM_xmlhttpRequest({ | |
| method: "GET", | |
| overrideMimeType: "text/plain; charset=x-user-defined", | |
| url: element.src, | |
| onload: function (res) { | |
| var type = contentType(res.responseHeaders); | |
| var oldsrc = element.src; | |
| element.addEventListener('error', function() { | |
| this.src = oldsrc; | |
| }, false); | |
| element.src = | |
| [ | |
| 'data:', | |
| type, | |
| ';base64,', | |
| base64encode(res.responseText) | |
| ].join(''); | |
| setTimeout(after_func, 1000); | |
| } | |
| }); | |
| } | |
| function contentType(headers) { | |
| return headers.match(/Content-Type: (.*)/i)[1]; | |
| } | |
| function base64encode(data) { | |
| return btoa(data.replace(/[\u0100-\uffff]/g, function(c) { | |
| return String.fromCharCode(c.charCodeAt(0) & 0xff); | |
| })); | |
| } | |
| function colorize(image){ | |
| return [ | |
| 'rgb(', | |
| image.data.slice(0,3).join(','), | |
| ')' | |
| ].join(''); | |
| } | |
| function log(s){ | |
| //unsafeWindow.console.log(s); | |
| } | |
| init(document); | |
| if(window.AutoPagerize) | |
| window.AutoPagerize.addFilter(function(docs){ | |
| docs.forEach(function(doc){ | |
| init(doc); | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment