Skip to content

Instantly share code, notes, and snippets.

@negipo
Created April 30, 2010 09:54
Show Gist options
  • Save negipo/385014 to your computer and use it in GitHub Desktop.
Save negipo/385014 to your computer and use it in GitHub Desktop.
// ==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