jquery 黑白

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。jQuery 黑白通常指的是使用 jQuery 来实现图像的黑白效果，即将彩色图像转换为灰度图像。

类型

CSS 方法：通过 CSS 的 filter 属性来实现黑白效果。
JavaScript 方法：使用 JavaScript 手动计算每个像素的灰度值。
jQuery 插件：使用现成的 jQuery 插件来实现黑白效果。

应用场景

图像处理：在图像展示页面中，用户可以选择将图像转换为黑白效果。
艺术效果：在艺术设计或摄影网站中，黑白效果可以用来突出图像的质感和线条。
数据可视化：在数据可视化图表中，黑白效果可以用来减少视觉干扰，突出数据本身。

示例代码

使用 CSS 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Black and White</title>
    <style>
        .bw {
            filter: grayscale(100%);
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <img id="myImage" src="path/to/image.jpg" alt="Sample Image">
    <button id="toggleBlackWhite">Toggle Black and White</button>

    <script>
        $(document).ready(function() {
            $('#toggleBlackWhite').click(function() {
                $('#myImage').toggleClass('bw');
            });
        });
    </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>jQuery Black and White</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <img id="myImage" src="path/to/image.jpg" alt="Sample Image">
    <button id="toggleBlackWhite">Toggle Black and White</button>

    <script>
        function toGrayscale(image) {
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            var imgElement = document.getElementById(image);
            canvas.width = imgElement.width;
            canvas.height = imgElement.height;
            ctx.drawImage(imgElement, 0, 0);
            var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            var data = imageData.data;
            for (var i = 0; i < data.length; i += 4) {
                var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
                data[i] = avg; // red
                data[i + 1] = avg; // green
                data[i + 2] = avg; // blue
            }
            ctx.putImageData(imageData, 0, 0);
            imgElement.src = canvas.toDataURL();
        }

        $(document).ready(function() {
            $('#toggleBlackWhite').click(function() {
                toGrayscale('myImage');
            });
        });
    </script>
</body>
</html>