关闭

Canvas截取视频图像并标记

标签: canvas视频截图标记
75人阅读 评论(0) 收藏 举报
分类:

本文是使用canvas实现截图效果

html使用video播放视频,canvas面板截图以及一个备份的canvas面板.
    <video id="video" autoplay="true"  width="500" height="400">
        <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
        <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
        <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
    </video>
    <canvas id="temp" width="500" height="400" style="display:none"></canvas>
    <canvas id="canvas" width="500" height="400" ></canvas>
    <button id="btn">截取</button>
下面是相关js实现,至于其他的重绘,清空面板等代码没有贴出来.
var canvas = $("#canvas"),
    ctx = canvas[0].getContext("2d"),
    position = {},
    canvasRect = {},
    line = [],//记录绘制的线
    check = false,//记录是否按住鼠标左键
    width = $("#video").width(),
    height = $("#video").height();

//截图    
function drawImg(){
    $("#temp")[0].getContext("2d").drawImage($("#video")[0], 0, 0, width, height);//设置一个备份图像
    ctx.drawImage($("#temp")[0], 0, 0, width, height);
}

//事件
(function event(){
    //截图
    $("#btn").on("click", function(){
        drawImg();
    });

    //鼠标左键按下
    canvas.on("mousedown", function(e){
        canvasRect = canvas[0].getBoundingClientRect(),
        position.x1 = e.clientX - canvasRect.left;
        position.y1 = e.clientY - canvasRect.top;
    });

    //移动
    $("#canvas").on("mousemove", function(e){//移动的时候画线
        if(!check) return;
        ctx.lineWidth = 2;
        ctx.clearRect(0, 0, width, height);
        ctx.drawImage($("#temp")[0], 0, 0, width, height); //从备份中取图像
        ctx.strokeStyle = 'red';
        drawLine(line);//绘制已经存在的线
        position.x2 = Math.round(e.clientX - canvasRect.left);
        position.y2 = Math.round(e.clientY - canvasRect.top);
        ctx.beginPath();
        ctx.moveTo(position.x1, position.y1);
        ctx.lineTo(position.x2, position.y2);
        ctx.stroke();
        drawLinePloy(position.x1, position.y1, position.x2, position.y2, ctx);//绘制箭头
    });
    //鼠标松开
    canvas.on("mouseup", function(e){
        check = false;
        ctx.clearRect(0, 0, canvas.width(), canvas.height());
        ctx.drawImage($("#temp")[0], 0, 0, width, height);  //从备份中取图像
        position.x2 = e.clientX - canvasRect.left;
        position.y2 = e.clientY - canvasRect.top;
        ctx.strokeStyle ='red';
        drawLine(line);//绘制已经存在的线
        ctx.beginPath();
        ctx.moveTo(position.x1, position.y1);
        ctx.lineTo(position.x2, position.y2);
        line.push(JSON.parse(JSON.stringify(position)));
        drawLinePloy(position.x1, position.y1, position.x2, position.y2, ctx);//绘制箭头
        ctx.stroke();
    });

    function drawLine(){
        //绘制已经存在的线
        line.forEach(function(item){
            ctx.beginPath();
            ctx.moveTo(item.x1, item.y1);
            ctx.lineTo(item.x2, item.y2);
            ctx.stroke();
            drawLinePloy(item.x1, item.y1, item.x2, item.y2, ctx);//画箭头
        });
    }

    //绘制箭头
    function drawLinePloy(x1, y1, x2, y2, ctx){
        var angle = Math.abs(Math.atan((x2 - x1) / (y2 - y1))),//倾斜角余角
            length = 10, //箭头斜线长度
            degree = Math.PI / 6, //箭头倾斜角
            theta = 0,
            altha = 0,
            a1 = 0,
            b1 = 0,
            a2 = 0,
            b2 = 0;

        if (angle >= degree && angle <= Math.PI / 2 - degree) {
            // console.log("30-60");
            theta = angle - degree;
            altha = Math.PI / 2 - 2 * degree - theta;
            if (x2 >= x1) {
                // console.log("x2 >= x1");
                a1 = x2 - length * Math.sin(theta);
                a2 = x2 - length * Math.cos(altha);
            } else {
                // console.log("x2 < x1");
                a1 = x2 + length * Math.sin(theta);
                a2 = x2 + length * Math.cos(altha);
            }
            if (y2 >= y1) {
                // console.log("y2 >= y1");
                b1 = y2 - length * Math.cos(theta);
                b2 = y2 - length * Math.sin(altha);
            } else {
                // console.log("y2 < y1");
                b1 = y2 + length * Math.cos(theta);
                b2 = y2 + length * Math.sin(altha);
            }
        } else {
            // console.log("0-30 && 60-90");
            theta = angle - degree;
            altha = theta + 2 * degree - Math.PI / 2;
            if (x2 >= x1 && y2 >= y1) {
                // console.log("x2 >= x1 && y2 >= y1");
                a1 = x2 - length * Math.sin(theta);
                b1 = y2 - length * Math.cos(theta);
                a2 = x2 - length * Math.cos(altha);
                b2 = y2 + length * Math.sin(altha);
            } else if (x2 >= x1 && y2 < y1) {
                // console.log("x2 >= x1 && y2 < y1");
                a1 = x2 - length * Math.sin(theta);
                b1 = y2 + length * Math.cos(theta);
                a2 = x2 - length * Math.cos(altha);
                b2 = y2 - length * Math.sin(altha);
            } else if (x2 < x1 && y2 < y1) {
                // console.log("x2 < x1 && y2 < y1");
                a1 = x2 + length * Math.sin(theta);
                b1 = y2 + length * Math.cos(theta);
                a2 = x2 + length * Math.cos(altha);
                b2 = y2 - length * Math.sin(altha);
            } else {
                // console.log("x2 < x1 && y2 >= y1");
                a1 = x2 + length * Math.sin(theta);
                b1 = y2 - length * Math.cos(theta);
                a2 = x2 + length * Math.cos(altha);
                b2 = y2 + length * Math.sin(altha);
            }
        }

        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.lineTo(a1, b1);
        ctx.stroke();
        ctx.moveTo(x2, y2);
        ctx.lineTo(a2, b2);
        ctx.stroke();
    }
})();

终于写博客了,上一篇博客在草稿箱放了一年多! 其实写写工作博客也是不错的,等有时间把有道云的笔记都转过来.
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:165次
    • 积分:20
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档