0

I'm having another problem with the Image processing app. There's calculations in my workbook:

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

And that's for the average for the most prominent and least prominent colours.

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

And that's for the Luminosity, weighted average.

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

And that's for the average, but I've done that already.

Here's my code again. I'm sorry about this.

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>

My question is: how can I make it greyscal? They've put:

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

For the greyscaling.

Any help would be greatly appreciated.

Thanks.

Josh Smith
  • 17
  • 4
  • Does this answer your question? [How can I grayscale a canvas image in JavaScript?](https://stackoverflow.com/questions/53364140/how-can-i-grayscale-a-canvas-image-in-javascript) – Yogi Sep 23 '22 at 15:44
  • I've tried that question before, but I don't really know Javascript. I really do need to practice it. However, for now, I don't really know Javascript. So, it's either easy answers and simple, or I don't know. I'm sorry. – Josh Smith Sep 23 '22 at 15:50
  • And also, the workbook says that I need to use the code above. I've tried, but it isn't working for me. – Josh Smith Sep 23 '22 at 16:45

1 Answers1

0

If you want to easily grayscale an image, you could just use CSS. It already provides a filter: grayscale() for you. See MDN.

If you can't use CSS, you should take a look at Jimp (JavaScript Image Manipulation Program). This lets you do anything from grayscale to inversion to anything else.

Lorik
  • 438
  • 2
  • 9
  • 1
    Thank you, but I don't think that's what the workbook wants me to do. Thanks anyway. I appreciate your help. – Josh Smith Sep 23 '22 at 15:36