如何使用canvas和javascript来像素化图像 [英] How to pixelate an image with canvas and javascript

问题描述

我一直在试验一下画布元素，并且很想知道如何去掉效果。

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

我有一些我想要的东西从教程和演示的集合，但我需要一些帮助获得其余的方式在那里。我正在寻找的是像素化图像在 mouseover ，然后重新聚焦/取消像素化它 mouseout 。您可以在 http://www.cropp.com/ 上看到一个很好的效果示例，当鼠标悬停在主旋转。

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.

这是一个链接到一个小提琴我开始了。小提琴不会工作，因为你不能使用跨域图像（womp womp），但你仍然可以看到我的代码到目前为止。当鼠标悬停在我的画布对象上时，我可以对图像进行像素化，但它对我想要得到的结果有些反向。任何帮助或建议将非常感谢。

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

推荐答案

迭代像素缓冲区以创建像素化效果。

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

只需关闭图像平滑，并将小图像放大到画布。这也意味着您可以使用任何图片作为源代码（CORS-wise）。

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).

示例：

小提琴演示

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.

这篇关于如何使用canvas和javascript来像素化图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！