模糊到像素化的自定义淡入答案

【问题标题】：Blurry to pixelated custom Fade In模糊到像素化的自定义淡入
【发布时间】：2017-11-23 13:24:17
【问题描述】：

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

这是一张图片。是的，我想传统上是通过制作动画 gif 来完成的。但是我可以用jQuery写效果吗？

在页面加载时。抓图#div>

图像加载模糊 > 然后像素化 > 然后清晰的原始 HQ 图像解析。

【问题讨论】：

这是针对特定图像的（例如，根据该图像为自己制作一个动画 gif）？还是您想对大量图像使用的效果？
你试过什么？您可以通过使用canvas 元素来应用图像过滤器来做到这一点。
用CSS3可以实现模糊，但不能做到像素化。
tympanus.net/Tutorials/ItemBlur
有一个插件可以帮助解决像素化问题。可能不是您正在寻找的确切选项，但如果您需要修改源代码，请查看源代码。 close-pixelate.desandro.com 将其与 blur.js 或其他方法结合使用即可。

标签： javascript jquery css

【解决方案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

【讨论】：

【解决方案2】：

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

【讨论】：