Breaking News: Grepper is joining You.com. Read the official announcement!

convert image to grayscale javascript

Olexxandr_S answered on August 5, 2022 Popularity 7/10 Helpfulness 6/10

answer convert image to grayscale javascript

convert image to grayscale javascript

Comment

const img = document.getElementById("yourImg");
const canvas = document.getElementById("canvas"); //here we draw a grayscale picture
const ctx = canvas.getContext("2d");

img.onload = function () {
  img.crossOrigin = "anonymous";
  ctx.drawImage(img, 0, 0);
  const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  for (i = 0; i < imgData.data.length; i += 4) {
    let count = imgData.data[i] + imgData.data[i + 1] + imgData.data[i + 2];
    let colour = 0;
    if (count > 510) colour = 255;
    else if (count > 255) colour = 127.5;

    imgData.data[i] = colour;
    imgData.data[i + 1] = colour;
    imgData.data[i + 2] = colour;
    imgData.data[i + 3] = 255;
  }
  ctx.putImageData(imgData, 0, 0);
};

/*
<html>
<img src="..." id="yourImg" />
<canvas id="canvas" width="200" height="200"></canvas>
</html>
*/

Popularity 7/10 Helpfulness 6/10 Language javascript

Source: Grepper

Tags: grayscale image javascript

Link to this answer
Share Copy Link

Contributed on Aug 05 2022

Olexxandr_S

0 Answers Avg Quality 2/10

convert image to grayscale javascript

Contents

More Related Answers

convert image to grayscale javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.