繁体   English   中英

Javascript - 如何使用此代码对图像进行灰度化?

[英]Javascript - how to greyscale an image using this code?

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

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;

对于灰度。

任何帮助将不胜感激。

谢谢。

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM