反色处理写的比较简单,灰色处理写了一些注释
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="board" width="1000" height="1000" style="background: lightgrey;"></canvas>
</body>
</html>
<script type="text/javascript">
var board = document.getElementById("board");
var context = board.getContext("2d");
//图像处理必须运行在服务器环境
var aImg = new Image();
aImg.src = "img/7.jpg";
context.beginPath();
aImg.onload = function(){
//绘制一张图片到 canvas 画布
//三个参数分别为 图片对象 画布位置(X轴 Y轴)
context.drawImage(aImg,10,10);
//getimageData--获取图片指定区域的像素
var imageDatas = context.getImageData(10,10,aImg.width,aImg.height);
//一个像素点需要用四个信息值去描述
// r g b a (颜色和透明度)
var dataArray = imageDatas.data;
//数组每四个元素代表一个像素的信息
for (var i = 0 ; i < dataArray.length ; i += 4) {
var r = dataArray[i];
var g = dataArray[i+1];
var b = dataArray[i+2];
//当 r = g = b 时会变成灰色(除了 0 0 0 和 255 255 255)
//取平均值
var result = parseInt((r + g + b) / 3);
dataArray[i] = result;
dataArray[i + 1] = result;
dataArray[i + 2] = result;
}
//根据像素点 去绘制图片
context.putImageData(imageDatas,150,150);
}
</script>