canvas探索之旅
说到HTML5,canvas可以说是几个热点之一.之前我也在书上看过,只是画圆画方,那时候真心觉得不知道拿来干嘛.不过今天闲着无聊,看到getImageData这个方法.原来canvas还能干这种事,看来以前的我真是弱爆了,没有深入的了解,就觉得canvas没啥用.
在这里,我就不介绍canvas的基础的,现在整个web好多canvas的基础知识,不了解的自己可以百X,谷X下.
先看看我今天都捣鼓了什么,其实就是简单的把2张图片融合在一起了而已
其实实现这东西并没有什么好说的,直接贴代码,代码里说好了
<canvas id="ps" width="800px" height="500px"></canvas>
<canvas id="ps2" width="800px" height="500px"></canvas>
<canvas id="ps3" width="800px" height="500px"></canvas>
<script>
//这一段基础不罗嗦
var canvas = document.getElementById("ps"),
ctx = canvas.getContext('2d'),
canvas2 = document.getElementById("ps2"),
ctx2 = canvas2.getContext('2d'),
canvas3 = document.getElementById("ps3"),
ctx3 = canvas3.getContext('2d'),
image = new Image(),
image2 = new Image(),
imagedata,
imagedata2,
pixels,
pixels2;
image.src = "./images/12.jpg";
image2.src = "./images/22.jpg";
image.onload = function () {
image2.onload = function () {
//把2张图画到第一二个canvas上;
ctx.drawImage(image, 0, 0);
ctx2.drawImage(image2, 0, 0);
//用getImageData在第一二个canvas上获取像素(重点中得重点)
imagedata = ctx.getImageData(0, 0, canvas.width, canvas.height);
imagedata2 = ctx2.getImageData(0, 0, canvas.width, canvas.height);
//对第一个canvas里图的像素进行操作
//这里我并没有对第一张图进行任何操作
pixels = imagedata.data;
for (i = pixels.length; i -= 4;) {
pixels[i] = pixels[i];
pixels[i + 1] = pixels[i + 1];
pixels[i + 2] = pixels[i + 2];
// pixels[i + 3] = 100;
}
//对第二个canvas里图的像素进行操作
//这里我把第一个canvas获取来的像素加到第二个canvas获取来的像素上(有点拗口)
pixels2 = imagedata2.data;
for (i = pixels2.length; i -= 4;) {
pixels2[i] = pixels[i] + pixels2[i];
pixels2[i + 1] = pixels[i + 1] + pixels2[i + 1];
pixels2[i + 2] = pixels[i + 2] + pixels2[i + 2];
// pixels2[i + 3] = 100;
}
//把修改后的像素绘制到第三个canvas上
ctx3.putImageData(imagedata2, 0, 0);
}
};
其实重点就是上面说的getImageData这个方法,它传入的参数很简单,主要是它的返回值是调用这个方法的canvas上的图像(其实说是图像感觉不太对劲),然后这个图像有一个属性data,里面以数组的形式存的是所有像素的RGBA值.例如:
imagedata.data[0] = 第一个像素的R
imagedata.data[1] = 第一个像素的G
imagedata.data[2] = 第一个像素的B
imagedata.data[3] = 第一个像素的A
imagedata.data[4] = 第二个像素的R
imagedata.data[5] = 第二个像素的G
imagedata.data[6] = 第二个像素的B
imagedata.data[7] = 第二个像素的A
所以在处理像素时,我的for循环才是 i-=4 .这里特别说明的是RGBA的A值的范围是0~255.之后把处理后的像素用putImageData画到canvas上就好了.
每个像素的处理.这可不是一个小功能.就单单我上面这个例子,只要在for循环里对像素判断处理,写一些关于颜色的算法,就可以达到PS的效果,什么灰白,渐变,调亮,模糊,马赛克,液化,调色等等.
在开源找到的,大家可以参考参考 [用canvas实现图片滤镜效果]
http://my.oschina.net/xiaopihailaotou/blog/172907