浅谈JavaScript和Canvas实现彩色图片转换成黑白图片

1、convertToGray()

在主体代码中使用 canvas 元素的id来获取画布,并设置画布的宽和高为图片的宽和高,再将上下文初始化为2d画布;彩色图片加载完成后,使用 drawImage() 将图片加载到上下文,调用用于完成剩余绘制工作的 getColorData() putColorData();最后为myImage指定彩色图片的路径。


2、getColorData()

使用 getImageData()将图像复制到 myImage,然后按照以下方式处理图像:在图像数据数组中移动,并收集前三个字节(红色、绿色和蓝色,忽略 alpha)的值;然后,该图像将三个字节的值相加,并将总和除以3,计算结果将舍入为一个整数,并被写入到这三个字节的值中。此值对应于颜色的色调,但灰度值从0到255,得到外观与原始彩色图片相同的黑白图片。

 

3、putColorData()

putImageData() 将已更改的图像数据写回到画布,通常用于让另一个图片执行实际处理,并仅在处理完成时显示结果。


var canvas, ctx, myImage;  
function convertToGray() {
	myImage = document.getElementById("img");
	canvas = document.getElementById("myCanvas");
	canvas.width = img.width;
	canvas.height = img.height;
	if (canvas.getContext) {
		ctx = canvas.getContext("2d");
		myImage.onload = function() {
			ctx.drawImage(myImage, 0, 0);
			getColorData();
			putColorData();
		}
		myImage.src = "images/img8.jpg";
	}
}
function getColorData() {
	var length = canvas.width * canvas.height;
	myImage = ctx.getImageData(0, 0, canvas.width, canvas.height);
	for (var i = 0; i < length * 4; i += 4) {
		var myRed = myImage.data[i];
		var myGreen = myImage.data[i + 1];
		var myBlue = myImage.data[i + 2];
		myGray = parseInt((myRed + myGreen + myBlue) / 3);
		myImage.data[i] = myGray;
		myImage.data[i + 1] = myGray;
		myImage.data[i + 2] = myGray;
	}
}      
function putColorData() {
	ctx.putImageData(myImage, 0, 0);
}
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhouziyu2011/article/details/61915099
个人分类: JavaScript HTML
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭