Question

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

我从一系列教程和演示中得到了我正在寻找的东西，但我需要一些帮助才能完成其余部分。我正在寻找的是在mouseover上对图像进行像素化，然后在mouseout上重新对焦/取消像素化。当鼠标悬停在主旋转木马下方的区块上时，您可以看到http://www.cropp.com/处效果的一个很好的例子。

这是我开始的link to a fiddle。小提琴不起作用，因为你不能使用跨域图像（womp womp），但到目前为止你仍然可以看到我的代码。当鼠标悬停在我的画布对象上时，我能够将图像像素化，但它有点像我想要的那样。任何帮助或建议将不胜感激。

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

Answer 1

您不需要迭代像素缓冲区来创建像素化效果。

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

示例：

<强> 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);

在演示中，您可以设置此效果的动画，以便与像素迭代方法相比，性能非常好，因为浏览器会在编译代码中内部处理“像素化”。

Answer 2

请记住，有一些javascript库会产生相同的效果，例如pixelate或close-pixelate。

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

2 个答案: