关闭

Canvas截取视频图像并标记

标签: canvas视频截图标记
155人阅读 评论(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网站的观点或立场

video用canvas实现截图和上传

开通博客这么久一直没有写什么,现在对自己在学习中用到的方法总结,方便自己也希望能帮助到别人。 我之前在再项目中实现了利用canvas对video进行截图并保存,我的思路是通过canvas的drawImage方法绘制截图,然后通过canvas.toDataURL('image/png...
  • qq_28459139
  • qq_28459139
  • 2016-06-14 10:15
  • 3892

H5 Video截取第一帧 Canvas 动态视频渲染、截取

由于现在的新媒体技术、资源、客户体验、需求等也越来越广、多、高,作为HTML5中较为重要的 新媒体video视频API,也是用得非常之多。            比如之前有个项目要在微信中做直播(半屏)播放(rtmp, m3u8等视频流),...
  • muguli2008
  • muguli2008
  • 2017-10-30 15:02
  • 841

H5 canvas如何载入视频

Canvas可以载入图片,那么Canvas 也可以载入视频。Canvas加载视频和图片是一样的,使用drawImage,区别就是给一个定时器不停的抓取每帧的画面,放入Canvas画布里面。 示例1 :附上demo:<!DOCTYPE html> <html lang="...
  • qq_16559905
  • qq_16559905
  • 2016-11-19 21:48
  • 7894

OpenCV从AVI视频提取图片

使用OpenCV提取AVI里的视频(不限制avi格式,只要opencv支持的格式都行,同样来源也可以是摄像头),每隔几帧保存一张。1.使用cvGrabFrame()+cvRetrieveFrame()int main() { CvCapture *capture = NULL; IplImage...
  • Augusdi
  • Augusdi
  • 2013-09-04 11:37
  • 8312

用JAVA获取视频文件中的帧图片并等比缩放

最近项目中有一个需要用JAVA
  • zhaowen25
  • zhaowen25
  • 2014-09-29 18:58
  • 12832

html5学习canvas图像处理

上一篇博客主要学习了关于canvas的图性处理相关用法,这里所有的图形都是通过计算机进行绘制的,今天学些使用canvas来绘制以后的图像以及图像的部分处理操作。drawImage绘制图像到canvas可以使用drawImage来将图片绘制到canvas中,该方法有如下参数: drawImage(im...
  • mockingbirds
  • mockingbirds
  • 2015-09-21 20:58
  • 2198

HTML基础入门:Canvas+视频播放+音频播放

通过HTML5几个小实例代码来了解HTML新特性,掌握一些基本知识。 实例效果如下:
  • ItJavawfc
  • ItJavawfc
  • 2015-01-25 11:39
  • 3131

[openCV]视频的读入与一些简单的图像处理

1.序言作为一个计算机图像处理的工具,因为免费公开呀,版权等等的原因,openCV开始展现出一些无可取代的优势(已经展露好久了好吧)。嘛,之前我研究生阶段,一直再用MATLAB在干活,总感觉调试呀,验证啊,还是MATLAB要好用一些呢!不久前,自己也开始接触了openCV,总感觉虽然都是工具,但是水...
  • thnh169
  • thnh169
  • 2015-05-21 10:05
  • 3271

HTML5 本地裁剪图片并上传至服务器 canvas图片上传 canvas图片裁剪

很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的。但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 5 步。步骤繁琐不说,当很多用户上传图片的时候也很影响服务器性能。 HTML5 的出现让我们...
  • u014071104
  • u014071104
  • 2016-05-26 11:03
  • 4198

Matlab 如何截取视频中的每一帧图像

%这段代码可以选择一个或多个视频,根据视频名称和帧的序号对图片命名。设定的只能选择avi格式,至于其它格式的视频你可以改改代码的第一句试试%看。 %希望对你有用。 [filename,pathname,fileindex]=uigetfile('*.avi','选择视频文...
  • cocoyilu
  • cocoyilu
  • 2015-10-29 19:54
  • 353
    个人资料
    • 访问:292次
    • 积分:22
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档