js 將圖片轉化成黑白

效果:
在這裏插入圖片描述

<!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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章