javascript - 模糊到像素化的自定义淡入

Question

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

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

在页面加载。抓图#div>

图像加载模糊 > 然后像素化 > 然后清晰的原始 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);

这是一个在线演示。

您可以使用底部的滑块查看各种尺寸和过渡所需的速度（使用 Chrome 在移动滑块时查看实时更新）或简单地点击动画按钮。

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

有关如何在大多数浏览器中关闭平滑的更完整说明，请参阅此答案：
Web 浏览器中的图像略微模糊。如何禁用它？

最后一个drawImage将使用源的剪辑部分（这里：画布本身）。有关如何使用此方法的更多详细信息，请参见此处。

至于模糊效果，我建议您对图像进行预模糊，因为此过程的开销很大，并且在大多数普通计算机上暂停会很明显。

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

Answer 2

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