jquery图片模糊效果

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。图片模糊效果通常是通过 CSS 或 JavaScript 来实现的，jQuery 可以方便地操作 DOM 元素并应用这些效果。

类型

CSS 模糊效果：通过 CSS 的 filter 属性实现。
JavaScript 模糊效果：通过 JavaScript 动态修改图片的像素数据实现。

应用场景

图片预览：在用户上传图片时，显示模糊的预览图。
焦点图：在焦点图中，当鼠标悬停在某张图片上时，其他图片变模糊。
背景模糊：在某些页面布局中，背景图片需要模糊以突出主要内容。

示例代码

使用 CSS 实现图片模糊效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片模糊效果</title>
    <style>
        .blur {
            filter: blur(5px);
        }
    </style>
</head>
<body>
    <img id="myImage" src="path/to/your/image.jpg" alt="图片">
    <button id="blurButton">模糊效果</button>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#blurButton').click(function() {
                $('#myImage').toggleClass('blur');
            });
        });
    </script>
</body>
</html>

使用 JavaScript 实现图片模糊效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片模糊效果</title>
</head>
<body>
    <img id="myImage" src="path/to/your/image.jpg" alt="图片">
    <button id="blurButton">模糊效果</button>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function applyBlur(image, intensity) {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            const img = new Image();
            img.src = image.src;
            img.onload = function() {
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.filter = `blur(${intensity}px)`;
                ctx.drawImage(img, 0, 0);
                image.src = canvas.toDataURL();
            };
        }

        $(document).ready(function() {
            $('#blurButton').click(function() {
                applyBlur($('#myImage')[0], 5);
            });
        });
    </script>
</body>
</html>