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

Question

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

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

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

Image loads blurry > then pixelates in > and then the clear original HQ image resolves.

Answer 1

要对图像进行像素化，您可以像这样以简单的方式直接使用 Canvas (此处假设图像已经加载):

/// 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 .

您可以使用底部的 slider 查看各种尺寸和过渡所需的速度(移动 slider 时使用 Chrome 浏览器查看实时更新)或只需点击动画按钮。

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

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

最后一个 drawImage 将使用源的裁剪部分(此处: Canvas 本身)。参见 here for more details关于如何使用此方法。

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

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