模糊到像素化自定义淡入

Question

我正在寻求使用jQuery或JS创建自定义淡入淡出。我希望淡化被夸大，从非常模糊，到像素化，再到清晰的清晰图像。在页面加载，一次。

这是一张图片。是的，传统通过制作一个动画GIF，我想。但是我可以用jQuery编写效果吗？

页面加载。抓取图片#div＆gt;

  

图片加载模糊＆gt;然后像素化＆gt;然后清晰的原始HQ图像结算。

Answer 1

要对图像进行像素化，您可以直接使用画布直接以这样的简单方式（此处假设图像已经加载）：

/// get a block size (see demo for this approach)
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 (see comment below)
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;  /// future

/// enlarge the minimized image to full size    
ctx.drawImage(canvas, 0, 0, w, h, 0, 0, canvas.width, canvas.height);

<强> Here is an online demo

您可以使用底部的滑块查看转换所需的各种尺寸和速度（使用Chrome浏览器移动滑块时查看实时更新）或只需点击动画按钮。

当我们关闭插值（图像平滑）时，新的放大图像将显示为块状。此方法也比大多数其他方法更快，主要是因为图像平滑现在可以在主流浏览器中关闭。

有关如何在大多数浏览器中关闭平滑的更完整说明，请参阅此答案：
Images in web browser are slightly blurred. How to disable it?

最后一个drawImage将使用源的剪切部分（此处：画布本身）。有关如何使用此方法，请参阅here for more details。

对于模糊效果，我建议您预先模糊图像，因为此过程会产生很大的开销，并且在大多数常见计算机上暂停都会很明显。

如果您仍想模糊“实时”图像，可以使用此叠加模糊：
http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

Answer 2

你可以使用David DeSandro的Close Pixelate。 The Pixelator就是一个很好的例子。

Answer 3

I would check this link然后从那里开始。 javascript最好的部分是它有非常松散的想法。