使用JS方式实现图片灰度变换

最新推荐文章于 2023-09-04 19:26:09 发布

风生晚凉

最新推荐文章于 2023-09-04 19:26:09 发布

阅读量3.5k

点赞数

分类专栏：前端 Javascript 文章标签： javascript 图像处理开发语言灰度变换

本文链接：https://blog.csdn.net/a1037949156/article/details/121177260

版权

前端同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

Javascript

2 篇文章 0 订阅

订阅专栏

灰度变换是指根据某种目标条件按一定变换关系逐点改变源图像中每一个像素灰度值的方法。目的是为了改善画质，使图像的显示效果更加清晰。图像的灰度变换处理是图像增强处理技术中的一种非常基础、直接的空间域图像处理方法，也是图像数字化软件和图像显示软件的一个重要组成部分。

在这里，博主的思路是拿到图片的二维数组信息，并取这个数组的平均值，然后再遍历整个数组，高于平均值的为黑色，低于平均值是为白色

具体代码如下：

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<div>
	<img id='stuPic' width="600" height="600">

</div>
<div>
	<canvas id="canvas" width="600" height="600"></canvas>
</div>
<input type="file" id="loadFile">
<button id="changeButton">灰度变换</button>
<button id="upload">图片上传</button>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>

    var canvas = document.getElementById('canvas');
	var context = canvas.getContext('2d');
	
	var isAllowDrawLine=false;
	
	context.lineWidth="20";
	//context.strokeStyle="#FF00001A"; 
	context.strokeStyle="#ffffff1A"; 

	function windowToCanvas(canvas,x,y){
		let rect=canvas.getBoundingClientRect();
		let data={
			"x":(x-rect.left*(canvas.width/rect.width)),
			"y":(y-rect.top*(canvas.height/rect.height))
		}

		return data;
	}
		

	canvas.onmousedown=function(e){
		isAllowDrawLine=true;
		//获得鼠标按下的点相对canvas的坐标。
		let ele=windowToCanvas(canvas,e.clientX,e.clientY);
		//es6的解构赋值
		let {x,y}=ele;
		//绘制起点。
		context.beginPath(); 
		context.moveTo(x,y);	

		//鼠标移动事件
		canvas.onmousemove=(e)=>{
			if(isAllowDrawLine){
				//移动时获取新的坐标位置，用lineTo记录当前的坐标，然后stroke绘制上一个点到当前点的路径
				let ele=windowToCanvas(canvas,e.clientX,e.clientY);
				let {x,y}=ele;
				context.lineTo(x,y);
				context.stroke();
			}
		}

				

	}

	canvas.onmouseup=function(){

		isAllowDrawLine=false;
		grey(600,600);
	}
	
	
	function clearCanvas(ctx,canvas)  
	{  
		
		ctx.clearRect(0,0,canvas.width,canvas.height);  
	}  
	
	//获取数组的中位数
	function AvgColor(array) {
        //将array的长度赋给len
        var len = array.length;
        var sum = 0;
		var min=array[0];
		var max=0;
        //利用for循环遍历数组的内容
        for(var i = 0; i < len ; i++){
            if(array[i]>=max){
			   max=array[i];
			}
			
			if(array[i]<min){
			   min=array[i];
			}
        }
		//返回数组的和与长度求平均值
        return (max+min)/2;
    }
	
	//获取数组平均数
	function AvgArray(array) {
        //将array的长度赋给len
        var len = array.length;
        var sum = 0;
        //利用for循环遍历数组的内容，利用sum累加求和
        for(var i = 0; i < len ; i++){
            sum += array[i];
        }
		//返回数组的和与长度求平均值
        return sum/len;
    }


	//灰度变换
	function grey(width,height){
			var imagedata = context.getImageData(0,0,width,height);
			var pix = imagedata.data;
			var controlMin = 210;
			var controlMax = 150;
			controlMin = AvgColor(pix);
			//计算图像的灰度级分层
			for(var i = 0;i< pix.length; i++){
			
				if(pix[i]>=controlMin){
					pix[i]=255;
				}else{
				    pix[i]=0;
				}
				
				//第二种方法：区域映射
				//if (pix[i] > controlMax && pix[i] < controlMin){
				//	pix[i] = controlMax;
				//}
			}
			clearCanvas(context,canvas);
			context.putImageData(imagedata, 0, 0);
	}
	
	
    $(function(){
		
	   $("#changeButton").click(function(){
	   
	   
	   
	   });
	   
	   $("#upload").click(function(){
	        /*
			var imagedata = context.getImageData(0,0,canvas.width,canvas.height);
			var uploadPayload = "["+imagedata.data.toString()+"]";
			
	        $.ajax({
			    type: "POST",
				url: "https://localhost:44320/api/QuestionImage", 
				processData: false,
				contentType: "application/json",
			    data:uploadPayload,
				success:function(res){
				   if(res==1){
				     alert("上传成功！")
				   }
				}
			});
			*/
			
			var imagedata = canvas.toDataURL("image/png");
			var uploadPayload = "\""+imagedata.split(",")[1]+"\"";
			$.ajax({
			    type: "POST",
				url: "https://localhost:44320/api/QuestionImage", 
				processData: false,
				contentType: "application/json",
			    data:uploadPayload,
				success:function(res){
				   if(res.State=="success"){
				     alert("上传成功！")
				   }
				}
			});
	   
	   });
	   
	   
	   
	   $("#loadFile").change(function(){
	        var file = $(this)[0].files[0];
			var fReader = new FileReader();
			fReader.readAsDataURL(file);
			fReader.onload = function (e){
				$("#stuPic").attr("src", this.result).load(function(){
					clearCanvas(context,canvas);
					context.drawImage(this,0,0);
					//var s = context.getImageData(100,50,350,150);
					grey(this.width,this.height);
					//context.putImageData(s,100,50);
				});
			};
	   
	   });
	   
	
	
	});
	
	
	
</script>
</body>
</html>

效果图如下：

风生晚凉

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用JS方式实现图片灰度变换

灰度变换是指根据某种目标条件按一定变换关系逐点改变源图像中每一个像素灰度值的方法。目的是为了改善画质，使图像的显示效果更加清晰。图像的灰度变换处理是图像增强处理技术中的一种非常基础、直接的空间域图像处理方法，也是图像数字化软件和图像显示软件的一个重要组成部分。在这里，博主的思路是拿到图片的二维数组信息，并取这个数组的平均值，然后再遍历整个数组，高于平均值的为黑色，低于平均值是为白色具体代码如下：<!DOCTYPE><html><head><me
复制链接

扫一扫