如何使用canvas和javascript对图像进行像素化处理

我一直在尝试使用canvas元素，并且对于如何实现一个效果感到好奇。

我从一系列教程和演示中大致了解到我正在寻找的东西，但我需要一些帮助来完成剩下的部分。我想要的效果是在鼠标移入时对图像进行像素化，然后在鼠标移出时重新聚焦/取消像素化。你可以在http://www.cropp.com/上的主轮播图下面的块上看到一个很好的示例效果。

这是一个链接到一个示例，但它无法工作，因为你不能使用跨域图像（很遗憾），但你仍然可以看到我到目前为止的代码。当我鼠标悬停在我的canvas对象上时，我能够对图像进行像素化，但与我尝试的效果相反。任何帮助或建议将不胜感激。

var pixelation = 40,
    fps = 120,
    timeInterval = 1000 / fps, 
    canvas = document.getElementById('photo'),
    context = canvas.getContext('2d'),
    imgObj = new Image();
imgObj.src = 'images/me.jpg';
imgObj.onload = function () {    
    context.drawImage(imgObj, 0, 0);
};
canvas.addEventListener('mouseover', function() {
    var interval = setInterval(function () {
        context.drawImage(imgObj, 0, 0);
        if (pixelation < 1) {
            clearInterval(interval);
            pixelation = 40;
        } else {
            pixelate(context, canvas.width, canvas.height, 0, 0);
        }
    }, timeInterval);
});
function pixelate(context, srcWidth, srcHeight, xPos, yPos) {
    var sourceX = xPos,
        sourceY = yPos,
        imageData = context.getImageData(sourceX, sourceY, srcWidth, srcHeight),
        data = imageData.data;
    for (var y = 0; y < srcHeight; y += pixelation) {
        for (var x = 0; x < srcWidth; x += pixelation) {
            var red = data[((srcWidth * y) + x) * 4],
                green = data[((srcWidth * y) + x) * 4 + 1],
                blue = data[((srcWidth * y) + x) * 4 + 2];
            for (var n = 0; n < pixelation; n++) {
                for (var m = 0; m < pixelation; m++) {
                    if (x + m < srcWidth) {
                        data[((srcWidth * (y + n)) + (x + m)) * 4] = red;
                        data[((srcWidth * (y + n)) + (x + m)) * 4 + 1] = green;
                        data[((srcWidth * (y + n)) + (x + m)) * 4 + 2] = blue;
                    }
                }
            }
        }
    }
    // 覆盖原始图像
    context.putImageData(imageData, xPos, yPos);
    pixelation -= 1;
}