使用canvas截图或者改变灰度

简述

html5新添加的canvas API可以让我们对画布进行开发应用，典型的是可以使用canvas截图或者

手工绘制“迷你图”（即嵌入在文本中的高清小图片）。

实现截图的方法很简单，就是创建一个canvas并用drawImage来获取该时刻视频帧，并使用canvas的

toDataURL转换成data URI。

也可对视频帧或者图片帧数据进行操作，drawImage返回ImageData对象，我们可以对该对象进行相关

处理计算。

在对canvas的事件处理中，我们有时需要判断当前点是否在某条路经或者某个图片上，可以通过event.clientX(Y)

来获取点击点在客户区的坐标，因此需要转换为canvas坐标系中的坐标，并且需要考虑到canvas坐标系的放缩。

因此可以这样实现：

　　

        //判断当前点是否已经绘制。

        function isInPaint(graphic,e){

            var cx = e.clientX,cy = e.clientY;

            var r = graphic.canvas.getBoundingClientRect();

            var imgData;

            cx = (cx - r.left) * (graphic.canvas.width / r.width);

            cy = (cy - r.top) * (graphic.canvas.height / r.height);

            //取出点击的该像素的数据

            //判断当前像素的alpha值是否为0

            imgData = graphic.getImageData(cx,cy,1,1);

            for(var i=0,len=imgData.length;i<len;i+=4){

                if(imgData[i+3] == 0)

                    return false;

            }

            return true;

        }

        //判断点是否在路径上，使用context的原生方法

        function isInPath(graphic,e){

            var cx = e.clientX,cy = e.clientY;

            var r = graphic.canvas.getBoundingClientRect();

            var imgData;

            cx = (cx - r.left) * (graphic.canvas.width / r.width);

            cy = (cy - r.top) * (graphic.canvas.height / r.height);

            return graphic.isPointInPath(cx,cy);

        }    

视频截图的demo：

　　

    <div>

        <video id="v" controls="controls" autoplay="autoplay" src="a.mp4" width="500" height="300"></video>

    </div>

    <canvas id="c" width="500" height="300"></canvas>

    <div>

        <img id="shot" width="500" height="300" >

    </div>

    <button id="btn">点击截图</button>

    <script>

        function $(i){return document.getElementById(i)}

        var c = $("c"),v = $("v");

        var g = c.getContext("2d");

        var btn = $("btn"),img = $("shot");

        function gray(g){

            var imageData,data,avr;

            g.drawImage(v,0,0,g.canvas.width, g.canvas.height);

            imageData = g.getImageData(0,0, g.canvas.width, g.canvas.height);

            data = imageData.data;

            //data包含图片像素信息，每个像素按照R、G、B、A 4个字节依次排列。

            //其中  data.width  为列数，data.height  为行数。

            //  可以使用 imageData_cache = g.createImageData(imgdata)创建缓存

            for(var i=0,len=data.length;i<len;i+=4){

                avr = (data[i] + data[i+1] + data[i+2]) / 3;

                data[i+2] = data[i+1] = data[i] = avr;

            }

            // 使用putImageData，则对全局透明度globalAlpha以及其他合成处理则

            // 没有效果，即参数中的imageData为最终处理值。

            g.putImageData(imageData,0,0);

            requestAnimationFrame(function(){gray(g)});

        }

        function shot(){

            var imageData,data,avr,canvas,graphic;

            canvas = document.createElement("canvas");

            canvas.style.cssText = "width:500px;height:300px;"

            graphic = canvas.getContext("2d");

            graphic.drawImage(v,0,0,graphic.canvas.width, graphic.canvas.height);

            img.src = canvas.toDataURL();

            canvas = null;

        }



        window.onload = function(){

            v.addEventListener('play', function(){

                requestAnimationFrame(function(){gray(g)});

            },false);

            btn.addEventListener("click",function(){

                shot()

            },false)

        }



    </script>