js实现将图片转成黑白

最新推荐文章于 2024-06-13 16:29:32 发布

张不大了

最新推荐文章于 2024-06-13 16:29:32 发布

阅读量309

点赞数

分类专栏： javascript 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_46054156/article/details/134309906

版权

javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片转化成黑白案例</title>
    <style>
        .conntainer {
            display: flex;
        }
    </style>
</head>

<body>
    <div class="conntainer">
        <img src="./bg2.jpg" alt="背景图片">
        <button onclick="change()">转换</button>
        <canvas id="canvas"></canvas>
    </div>
    <script>
        /**
        *图片是有许多的像素点组成的，存在在一个特定的数组里面， 每4位为一个像素点，要为黑白的话，取前面3位的平均值就好
        *
        */
        function change() {
            const img = document.querySelector('img');
            const cvs = document.getElementById("canvas");
            cvs.width = img.width;
            cvs.height = img.height;
            const ctx = cvs.getContext('2d');
            ctx.drawImage(img, 0, 0);
            // 获取图片的所有像素点
            const imgArrData = ctx.getImageData(0, 0, img.width, img.height);
            for (let i = 0; i < imgArrData.data.length; i += 4) {
                let r = imgArrData.data[i],
                    g = imgArrData.data[i + 1],
                    b = imgArrData.data[i + 2];
                const avg = (r + g + b) / 3;
                imgArrData.data[i] = imgArrData.data[i + 1] = imgArrData.data[i + 2] = avg;
            }
            console.log(imgArrData)
            ctx.putImageData(imgArrData, 0, 0);
        }
    </script>
</body>

</html>