Javascript 模糊到像素化自定义淡入

我想用jQuery或JS创建一个自定义淡入。我希望淡入是夸张的，从非常模糊到像素化，再到清晰清晰的图像。页面加载时，一次

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

在页面加载时。抓取图像

#div

>

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

大卫·德桑德罗可以用。这是一个很好的例子。

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

您可以使用底部的滑块查看过渡所需的各种大小和速度（移动滑块时使用Chrome查看实时更新），或者只需点击动画按钮

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

有关如何在大多数浏览器中关闭平滑的更完整说明，请参见此答案：

最后一个

drawImage

将使用源代码的剪裁部分（此处：画布本身）。有关如何使用此方法的详细信息，请参见

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

如果您仍然希望模糊图像“实时”，可以使用此堆栈模糊：

---

这是针对某一特定图像的吗（例如，根据该图像制作动画gif）？或者你想在很多图像中使用的效果？你尝试过什么？您可以使用

canvas

元素应用图像过滤器来实现这一点。使用CSS3可以实现模糊，但无法进行像素化。有一个插件可以帮助进行像素化。可能不是您要寻找的确切选项，但如果需要修改源代码，请查看源代码。将此方法与blur.js或其他方法结合使用，即可完成设置。

/// 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);