目录：
- 每篇前言~
- canvas对像素的操作
- 1. .getImageData（）方法和.putImageData（）方法
- 2.实践——图像灰度化处理
- 3.实践——两种方法实现马赛克效果
- 第一种方法：
- 第二种方法：
canvas对像素的操作
1. .getImageData（）方法和.putImageData（）方法
<html>
<head>
<meta charset="UTF-8">
<title>像素处理</title>
<style type="text/css">
#c{
border: 1px solid blue;
}
</style>
</head>
<body>
<canvas id="c" width="576" height="720"></canvas>
</body>
<script type="text/javascript">
var c = document.getElementById("c");
var ctx = c.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(100,100,100,100);
// 取出画布中指定区域的信息
// 1个像素包含4个信息，分别是red,green,blue,alpha
// 每个信息的取值范围是0~255
var imageData = ctx.getImageData(100,100,10,10);
for(var i=0; i<imageData.data.length;i++){
if(i % 4 == 1){
imageData.data[i] = 0;
}
}
// 指定区域的像素数据填充为imageData
ctx.putImageData(imageData,100,100);
</script>
</html>
2.实践——图像灰度化处理
- （使用python实现图像灰度化处理，点我！！！）
<html>
<head>
<meta charset="UTF-8">
<title>灰度图</title>
<style type="text/css">
</style>
</head>
<body>
<canvas id="c" width="1078" height="1881"></canvas>
</body>
<script type="text/javascript">
var c = document.getElementById("c");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "img/1.jpeg" // 图像地址（相对路径）
img.onload = function(){
ctx.drawImage(img,0,0,1078,1881);
var imageData = ctx.getImageData(0,0,1078,1881);
// 灰度图是某一个像素r,g,b的值完全相同，
// 只要rgb值一样，一定是一个灰色，只不过灰的程度不同。
// 思路：
// 找到每一个像素，获取这个像素的r,g,b的值
// 计算r,g,b的平均值
// 把平均值回填到像素里。
for(i=0;i<imageData.data.length;i+=4){
var r = imageData.data[i];
var g = imageData.data[i+1];
var b = imageData.data[i+2];
var avg = (r + g + b) / 3;
imageData.data[i] = avg;
imageData.data[i+1] = avg;
imageData.data[i+2] = avg;
}
// 把图像数据绘制到画布上
ctx.putImageData(imageData,0,0);
}
</script>
</html>原图：
灰度化后的图：
3.实践——两种方法实现马赛克效果
第一种方法：
- 第一种思路：通过获取鼠标点击处像素点r,g,b信息；再将此像素点信息赋值给周围10*10像素点的r,g,b信息实现马赛克！
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#c{
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="c" width="1078" height="1881"></canvas>
</body>
<script type="text/javascript">
var c = document.getElementById("c");
var jb = c.getContext("2d");
// 创建一个图片对象
var img = new Image();
// 指定图片的内容
img.src = 'img/1.jpeg';
// 注意：图片不能直接放canvas上，需要通过事件.onload加载，不然图片可能因为没有加载完成而未出现在画布
img.onload = function(){
jb.drawImage(this,0,0,1078,1881);
}
c.onmousedown = function(ev){
c.onmousemove = function(e){
// 获取鼠标点击处相对于画布这个坐标系的x,y坐标
var x = e.pageX - c.offsetLeft;
var y = e.pageY - c.offsetTop;
console.log(x + "," + y);
// 通过方法getImageData()获取到鼠标点击处的像素点的r,g,b,a信息数组
var imageData = jb.getImageData(x,y,1,1);
// 通过下标取值得到鼠标点击处像素点的r,g,b
var r = imageData.data[0];
var g = imageData.data[1];
var b = imageData.data[2];
console.log(r + "-" + g + "-" + b)
// 通过将以鼠标点击处为重心长*宽为10*10像素点的矩形内各像素点r,g,b都赋值为鼠标点击处像素点的r,g,b
// 实现马赛克效果！
var imageData2 = jb.getImageData(x-5,y-5,10,10);
for(i = 0; i<imageData2.data.length; i+=4){
imageData2.data[i] = r;
imageData2.data[i+1]= g;
imageData2.data[i+2]= b;
}
jb.putImageData(imageData2,x-5,y-5);
}
}
c.onmouseup = function(ev){
// 取消onmousemove事件
c.onmousemove = null;
}
</script>
</html>
第二种方法：
- 第二种思路：通过获取鼠标点击处像素点r,g,b信息；再以此像素点信息绘制填充一个以此像素点为重心的10*10的矩形：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#c{
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="c" width="1078" height="1881"></canvas>
</body>
<script type="text/javascript">
var c = document.getElementById("c");
var jb = c.getContext("2d");
// 创建一个图片对象
var img = new Image();
// 指定图片的内容
img.src = 'img/1.jpeg';
// 注意：图片不能直接放canvas上，需要通过事件.onload加载，不然图片可能因为没有加载完成而未出现在画布
img.onload = function(){
jb.drawImage(this,0,0,1078,1881);
}
c.onmousedown = function(ev){
c.onmousemove = function(e){
var x = e.pageX - c.offsetLeft;
var y = e.pageY - c.offsetTop;
console.log(x + "," + y);
var imageData = jb.getImageData(x,y,1,1);
var r = imageData.data[0];
var g = imageData.data[1];
var b = imageData.data[2];
console.log(r + "-" + g + "-" + b)
var color = "rgb("+r+","+g+","+b+")"; // 使用rgb值构造颜色用到rgb()函数："rgb(r,g,b)";
jb.fillStyle = color;
jb.fillRect(x-5,y-5,10,10);
}
}
c.onmouseup = function(ev){
// 取消onmousemove事件
c.onmousemove = null;
}
</script>
</html>
