JS区域滤镜

海天鹰

已于 2023-07-12 22:46:33 修改

阅读量236

点赞数

分类专栏： JS 文章标签： javascript

于 2023-07-12 22:26:43 首次发布

本文链接：https://blog.csdn.net/sonichty/article/details/131691603

版权

JS 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

该文章展示了一个使用HTML5Canvas和JavaScript实现的简单图像处理示例，将图片中X坐标位于宽度1/3到2/3区域的像素点转换为灰度，而保持其他部分不变，创建出一种边缘灰度效果。

摘要由CSDN通过智能技术生成

思路

简单一点的，像素点X坐标小于图宽1/3和大于2/3的点变灰，中间的点不变。

复杂的暂时不会搞。

原图

处理后

<html>
<style>
#canvas { width:100%; }
</style>
<body>
<input id="file" type="file" accept="image/*"><br>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var image = new Image;

document.getElementById('file').addEventListener('change',function(){ read(); }, false);

function read() {
	file = document.getElementById('file').files[0];
	var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e){
		image.src = reader.result;
		image.onload = function(e) {
			canvas.width = image.width;
			canvas.height = image.height;
			ctx.drawImage(image, 0, 0);
			filter();
		}
	};	
}

function filter() {
    var data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
    var imageData = ctx.createImageData(canvas.width, canvas.height);
	var data1 = imageData.data;
    for (i=0; i<data.length; i+=4) {
		var x = i / 4 % canvas.width;
        //var y = i / 4 / canvas.width;
        //十字
        //if ((x > canvas.width / 3 && x < canvas.width * 2/3) || (y > canvas.height / 3 && y < canvas.height * 2/3)) {
		if (x > canvas.width / 3 && x < canvas.width * 2/3) {
			data1[i] = data[i];
			data1[i+1] = data[i+1];
			data1[i+2] = data[i+2];
			data1[i+3] = data[i+3];
		} else {
			var gray = data[i] * 0.3 +  data[i+1] * 0.59 + data[i+2] * 0.11;
			data1[i] = gray;
			data1[i+1] = gray;
			data1[i+2] = gray;
			data1[i+3] = data[i+3];
		}
    }
    ctx.putImageData(imageData, 0, 0);
}
</script>
</body>
</html>