31

I've been experimenting a bit with the canvas element and was curious how to pull off an effect.

I've somewhat got what I'm looking for from a collection of tutorials and demos, but I need some assistance getting the rest of the way there. What I'm looking for is to pixelate an image on mouseover, then refocus/un-pixelate it on mouseout. You can see a good example of the effect at http://www.cropp.com/ when mousing over the blocks that are below the main carousel.

Here is a link to a fiddle I started. The fiddle won't work because you can't use cross domain images (womp womp), but you can still see my code thus far. When mousing over my canvas object I'm able to pixelate the image, but it's kind of backwards to what I'm attempting to get. Any help or advice would be greatly appreciated.

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;
                    }
                }
            }
        }
    }

    // overwrite original image
    context.putImageData(imageData, xPos, yPos);
    pixelation -= 1;
}
1

2 Answers 2

49

You don't need to iterate pixel buffer to create a pixelating effect.

Simply turn off image smoothing and enlarge a small version of the image to the canvas. This will also mean you can use any image as source (CORS-wise).

Example:

Fiddle demo

// get a block size (see demo for this approach)
var size = blocks.value / 100,
    w = canvas.width * size,
    h = canvas.height * size;

// draw the original image at a fraction of the final size
ctx.drawImage(img, 0, 0, w, h);

// turn off image aliasing
ctx.msImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;

// enlarge the minimized image to full size    
ctx.drawImage(canvas, 0, 0, w, h, 0, 0, canvas.width, canvas.height);

In the demo you can animate this effect to see that the performance is very good compared to an pixel iterating method as the browser takes care of the "pixelation" internally in compiled code.

8
  • Wow that looks great, and far less code than what I had going. Would you mind explaining the code a bit perhaps? I understand what the pixelate method is doing, but a bit curious about how toggleAnim works and the requestAnimationFrame. How could I get that function to animate to a certain point (pixelated) and then stop. Or vice versa? Oct 2, 2013 at 14:26
  • @brandongray toggleAnim is just part of the demo to animate the pixelation to get an impression of the performance. I updated the demo with inline comments. requestAnimationFrame is a low-level animation method that allows you to synchronize animations to monitor updates to make it smoother and more performant. It works better than setTimout/setInterval.
    – user1693593
    Oct 2, 2013 at 19:30
  • @ken-abdias-software I appreciate the comments. If you have another min and are willing to help could you take a look at this fiddle. I've got it working on mouseover/out but it feels dirty. For instance if I rapidly mouse over and then out the transition doesn't look smooth. The mouse over function continues to run at that point. Any suggestions on how I could get it to smoothly transition? For example if I rapidly hover and then mouse out the transition out is from whatever point the hover effect got to. Hopefully that makes some sense. Oct 4, 2013 at 13:32
  • @ken-abdias-software Ah, I see what you did there with moving a few things to be globally accessible as well as the isPlaying flag. Makes perfect sense now. Definitely a lot cleaner than what I had put together. Thanks a lot for all your help! Oct 5, 2013 at 0:51
  • 2
    It seems this answer was converted to a full-blown library: github.com/43081j/pixelate.js
    – gaborous
    Mar 13, 2018 at 18:06
7

Just keep in mind, there is a few javascript libraries doing same effect, for example pixelate or close-pixelate.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.