我一直在尝试使用 Canvas 元素,并且很好奇如何实现效果。
我已经从一系列教程和演示中得到了我想要的东西,但我需要一些帮助才能完成剩下的事情。我正在寻找的是在鼠标悬停时对图像进行像素化,然后在鼠标移出时重新聚焦/取消像素化。您可以在 http://www.cropp.com/ 中看到效果的一个很好的示例。当鼠标悬停在主轮播下方的 block 上时。
这是一个link to a fiddle我已开始。 fiddle 不起作用,因为您无法使用跨域图像(womp womp),但到目前为止您仍然可以看到我的代码。当鼠标悬停在 Canvas 对象上时,我可以对图像进行像素化,但这有点倒退到我想要得到的效果。任何帮助或建议将不胜感激。
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;
}
最佳答案
您不需要迭代像素缓冲区来创建像素化效果。
只需关闭图像平滑并将图像的小版本放大到 Canvas 即可。这也意味着您可以使用任何图像作为源(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);
在演示中,您可以制作此效果的动画,以查看与像素迭代方法相比,性能非常好,因为浏览器会在编译代码中内部处理“像素化”。
关于javascript - 如何使用canvas和javascript对图像进行像素化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19129644/