如何使用画布和 javascript 对图像进行像素化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19129644/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to pixelate an image with canvas and javascript
提问by brandongray
I've been experimenting a bit with the canvas element and was curious how to pull off an effect.
我一直在尝试使用 canvas 元素，并且很好奇如何实现效果。
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.
我从一系列教程和演示中找到了我想要的东西，但我需要一些帮助才能完成剩下的工作。我正在寻找的是在 上对图像进行像素化mouseover，然后在 上重新聚焦/取消像素化mouseout。将鼠标悬停在主转盘下方的块上时，您可以在http://www.cropp.com/ 上看到一个很好的效果示例。
Here is a link to a fiddleI 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.
这是我开始的小提琴的链接。小提琴不起作用，因为您不能使用跨域图像（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;
}
回答by
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).
只需关闭图像平滑并将图像的小版本放大到画布即可。这也意味着您可以使用任何图像作为源（CORS-wise）。
Example:
例子：
// 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.
在演示中，您可以对这种效果进行动画处理，以查看与像素迭代方法相比性能非常好，因为浏览器在编译代码中内部处理“像素化”。
回答by Alexey B.
Just keep in mind, there is a few javascript libraries doing same effect, for example pixelateor close-pixelate.
请记住，有一些 javascript 库具有相同的效果，例如pixelate或close-pixelate。
