如何使用画布和 javascript 对图像进行像素化 [英] How to pixelate an image with canvas and javascript

问题描述

我一直在尝试使用 canvas 元素，并且很好奇如何实现效果.

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

示例:

小提琴演示

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

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