画布中的灰度图像 - Javascript (1)

📌 相关文章

📜 画布中的灰度图像 - Javascript (1)

📅 最后修改于: 2023-12-03 15:40:57.887000 🧑 作者: Mango

画布中的灰度图像 - JavaScript

在 JavaScript 中，使用 Canvas API 可以直接在网页上绘制图像。而灰度图像则是一种常用的图像处理方式，通常用于将彩色图像转换为黑白图像。

如何创建灰度图像

在 JavaScript 中，可以使用 getImageData() 和 putImageData() 函数获取和设置图像像素的信息。具体步骤如下：

获取原始图像的像素信息。

let imageData = context.getImageData(0, 0, canvas.width, canvas.height);
let pixels = imageData.data;

循环遍历图像像素信息，将图像转换为灰度图像。

for(let i = 0; i < pixels.length; i+=4){
    let r = pixels[i];
    let g = pixels[i+1];
    let b = pixels[i+2];
    let gray = r*0.299 + g*0.587 + b*0.114;
    pixels[i] = pixels[i+1] = pixels[i+2] = gray;
}

将转换后的像素信息重新设置给画布。

context.putImageData(imageData, 0, 0);

示例代码

下面是一个简单的示例，该示例可以将选择的图片转换为灰度图像，并将处理后的图像显示在画布上。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>灰度图像示例</title>
    <style>
        canvas {
            width: 100%;
            height: auto;
            max-width: 400px;
        }
    </style>
</head>
<body>
    <input type="file" id="fileInput">
    <canvas id="canvas"></canvas>
    <script>
        let canvas = document.getElementById('canvas');
        let context = canvas.getContext('2d');
        let fileInput = document.getElementById('fileInput');
        
        fileInput.addEventListener('change', () => {
            let file = fileInput.files[0];
            let reader = new FileReader();
            reader.onload = () => {
                let image = new Image();
                image.onload = () => {
                    canvas.width = image.width;
                    canvas.height = image.height;
                    context.drawImage(image, 0, 0);
                    let imageData = context.getImageData(0, 0, canvas.width, canvas.height);
                    let pixels = imageData.data;
                    for(let i = 0; i < pixels.length; i+=4){
                        let r = pixels[i];
                        let g = pixels[i+1];
                        let b = pixels[i+2];
                        let gray = r*0.299 + g*0.587 + b*0.114;
                        pixels[i] = pixels[i+1] = pixels[i+2] = gray;
                    }
                    context.putImageData(imageData, 0, 0);
                }
                image.src = reader.result;
            }
            reader.readAsDataURL(file);
        })
    </script>
</body>
</html>

总结

本文介绍了如何使用 JavaScript 将彩色图像转换为灰度图像，并在画布上显示转换后的图像。通过学习本文，您已经可以掌握 Canvas API 中基本的像素处理操作，希望对您的工作或学习有所帮助。