degrade_twitter_icons.user.js

// ==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);
        });
    });