js基于canvas实现图片去色变成黑白图片

六月初六月初 JavaScipt 2023-08-23 15:19:50

canvas画布在HTML5用于在网页实时生成图像，关于canvas的功能也随着canvas的逐渐应用而增多。

常见的canvas效果有图片合并、剪切、动画等效果，可以说canvas使网页更加丰富。

那么如果我们需要将一张彩色的图片变成黑白图片，是否可以使用canvas来实现呢？


答案毋庸置疑是肯定的，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<title>js基于canvas将图片去色变成黑白图片</title>
	</head>
	<body>
		<img id="img" src='./205549.jpg'>
		<canvas id="drawing" width="176" height="200" ></canvas>
		<script>
			var drawing = document.getElementById('drawing')
			function drawImageData (image) {
			      var context2d = null;
			      if(drawing.getContext) {
			        context2d = drawing.getContext('2d');
			      }
			      if (context2d == null) {
			        return;
			      }
			      context2d.drawImage(image, 0 , 0);
			      var imagedata = context2d.getImageData(0, 0, image.width, image.height);
			      var data = imagedata.data;
			      // console.log('data: ' + data);
			      var i,len,red,green,blue,alpha,average;
			      for (i = 0 , len = data.length; i < len; i+=4) {
			        red = data[i];
			        green = data[i + 1];
			        blue = data[i + 2];
			        alpha = data[i + 3];
			        average = Math.floor((red + green + blue) / 3);
			        data[i] = average; 
			        data[i+1] = average; 
			        data[i+2] = average;
			      }
			      imagedata.data = data;
			      context2d.putImageData(imagedata, 0, 0);
			    }
				setTimeout(function(){
					drawImageData (document.getElementById('img'))
				},3000)
		</script>
	</body>
</html>

将上面代码复制到html中，替换图片路径运行即可看到结果。

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！