canvas探索之旅

原创
2014/04/29 17:15
阅读数 235

说到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




展开阅读全文
打赏
0
6 收藏
分享
加载中
更多评论
打赏
0 评论
6 收藏
0
分享
返回顶部
顶部