Javascript - 如何使用此代码对图像进行灰度化？并反转它？答案

【问题标题】：Javascript - how to greyscale an image using this code? And invert it as well?Javascript - 如何使用此代码对图像进行灰度化？并反转它？
【发布时间】：2022-09-23 23:30:21
【问题描述】：

我在使用图像处理应用程序时遇到了另一个问题。我的工作簿中有计算：

f(x.y) = (max(R, G, B) + min(R, G, B)) / 2

这是最突出和最不突出颜色的平均值。

f(x.y) = (0.21 R + 0.72 G + 0.07 B)

这是亮度，加权平均值。

f(x.y) = R + G + B) / 3

这是平均水平，但我已经这样做了。

这是我的代码。我对此感到抱歉。

var mySrcImg = new Image ();
                    mySrcImg.crossOrigin = \"\";
                    mySrcImg.onload = test;
                    mySrcImg.src = \"Your image\";
                    
                    function test () {
                        var canvas = document.getElementById(\"canvas\");
                        var context = canvas.getContext(\"2d\");
                        
                        context.fillStyle = \"rgb(0,200,0)\";
                        context.fillRect (0, 0, 800, 800);
                        
                        // Copy the image to the canvas
                        context.drawImage (mySrcImg, 0, 0);
                        
                        // Get your image data
                        var myImageData;
                        myImageData = context.getImageData(0, 0, canvas.width, canvas.height);
                        
                        // Loop over each pixel and invert the colours
                        var pixelComponents = myImageData.data;
                        var n = pixelComponents.length;
                        for (var i = 0; i < n; i += 4) {
                            // One pixel:
                            var average = (Math.max(pixelComponents[i  ], pixelComponents[i+1],
                                            pixelComponents[i+2]) + Math.min(pixelComponents[i  ], 
                                            pixelComponents[i+1], pixelComponents[i+2])) / 2;
                            pixelComponents[i  ]; // red
                            pixelComponents[i+1]; // green
                            pixelComponents[i+2]; // blue
                            // i+3 is alpha (the fourth element)
                            
                    }
                        
                    // Draw the ImageData object at the given (x,y) coordinates 
                    context.putImageData(myImageData, 0, 0);
                        
                    document.getElementById(\"srcImgDiv\").appendChild(mySrcImg);
                }

!doctype html>
<html lang=\"en\">
    <head>
        <meta charset=\"utf-8\">
        <title>My Image Processing App</title>
    </head>
    
    <body> 
        <h1 id=\"MyHeader\">Image Processing App</h1>
        <p><b>Original Image:</b></p>
            <div id=\'srcImgDiv\'></div>
        
            <p><br></p>
        <p><b>Converted Image:</b></p>
            <canvas id=\"canvas\" width=\"800\" height=\"800\"> </canvas>
            <p><br></p>

我的问题是：我怎样才能使它成为灰度，然后对于另一个项目，反转颜色？他们放了：

var average = (Math.max(pixelComponents[i  ], pixelComponents[i+1],
                                            pixelComponents[i+2]) + Math.min(pixelComponents[i  ], 
                                            pixelComponents[i+1], pixelComponents[i+2])) / 2;

对于灰度。另一个用于反转平均标签中提供的行中的颜色。

任何帮助将不胜感激。

谢谢。

标签： javascript canvas

【解决方案1】：

如果您想轻松地对图像进行灰度化，则可以使用 CSS。它已经为您提供了filter: grayscale()。见MDN。

如果你不会使用 CSS，你应该看看Jimp (JavaScript Image Manipulation Program)。这让您可以做任何事情，从灰度到反转再到其他任何事情。

【讨论】：