grayscale image in canvas

HimansaE answered on June 16, 2020 Popularity 6/10 Helpfulness 4/10

answer grayscale image in canvas

grayscale image in canvas

Comment

window.onload = function() {
let canvas = document.getElementById("c");

	  let ctx = canvas.getContext("2d");
    canvas.width=50;
    canvas.height=50;

		let srcImg = document.getElementById("sof");
		ctx.drawImage(srcImg, 0, 0, ctx.canvas.width, ctx.canvas.height);
		let imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
		let pixels = imgData.data;
		for (var i = 0; i < pixels.length; i += 4) {
		  
		let lightness = parseInt((pixels[i] + pixels[i + 1] + pixels[i + 2])/3);
    
		  pixels[i] = lightness; 
		  pixels[i + 1] = lightness; 
		  pixels[i + 2] = lightness; 
		}
		ctx.putImageData(imgData, 0, 0);
	  }

Popularity 6/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: canvas grayscale image javascript

Link to this answer
Share Copy Link

Contributed on Jun 16 2020

HimansaE

0 Answers Avg Quality 2/10

grayscale image in canvas

Contents

More Related Answers

grayscale image in canvas

Grepper

Documentation

Social

Legal

Contact

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