文档章节

HTML5 视频、图片截图实例

高处胜寒
 高处胜寒
发布于 2017/09/04 10:51
字数 721
阅读 95
收藏 1
(function() {
    "use strict";

    var video, $output;
    //var scale = 0.25;
    var scale = 1;

    var initialize = function() {
        $output = $("#output");
        video = $("#video").get(0);
        $("#capture").click(captureImage);
    };

    var captureImage = function() {
        var canvas = document.createElement("canvas");
        canvas.width = video.videoWidth * scale;
        canvas.height = video.videoHeight * scale;
        canvas.getContext('2d')
            .drawImage(video, 0, 0, canvas.width, canvas.height);

        var img = document.createElement("img");
        img.src = canvas.toDataURL();
        $output.prepend(img);
    };

    $(initialize);

}());

 

 

<div class="container">


    <video id="video" poster="./pic.jpg" controls crossorigin>
        <!-- Video files -->

        <!--http://1253326750.vod2.myqcloud.com/2b8e2321vodgzp1253326750/2b75f4e89031868222969261252/f0.mp4-->
        <!--http://1253326750.vod2.myqcloud.com/2b8e2321vodgzp1253326750/54f4ff6b9031868223182765357/f0.mp4-->
        <source src="http://1253326750.vod2.myqcloud.com/2b8e2321vodgzp1253326750/54f4ff6b9031868223182765357/f0.mp4"
                type="video/mp4">
        <!-- Fallback for browsers that don't support the <video> element -->
        <!--<a href="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a>-->
    </video>

    <br>

    <div id="output"></div>


    <br>

    <div class="actions">
        <button type="button" class="btn js-play btn-default">播放</button>
        <button type="button" class="btn js-pause btn-default">暂停</button>
        <button type="button" class="btn js-stop btn-default">停止</button>
        <button type="button" class="btn js-rewind btn-default">后退</button>
        <button type="button" class="btn js-forward btn-default">前进</button>
        <!--<button type="button" id="capture" class="btn js-forward btn-default" onclick="captureImage();">截图</button>-->
        <button type="button" id="capture" class="btn js-forward btn-default">截图</button>
    </div>
</div>

 

 

2、图片截图:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>小雨在线-开发测试</title>



    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->



    <script type="text/javascript">
        function takeScreenshot() {
            console.log('test');
            html2canvas(document.getElementById('view'), {
                onrendered: function(canvas) {
                    document.body.appendChild(canvas);
                },
                // width: 300,
                // height: 300
            });
        }
    </script>






</head>
<body>




<div class="container-fluid">


    <div id="view" style="background:url(psb.jpg) 50%; width: 700px; height: 500px;">
        <input type="button" value="截图" onclick="takeScreenshot()">
    </div>



</div>







<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>



<script>

    $(function () {
        //alert("1111111");

    });




</script>




</body>
</html>

 

 

截取表格元素:

<table id="tb" class="table table-bordered table-hover text-center">

    <tbody>


    <tr>

        <td>开营,成功激励团队建设</td>
        <td>团队展示 流程管理</td>
        <td>约翰库缇斯 无臂女人感恩坚持</td>
        <td>激情开营</td>
        <td>韩教授</td>
    </tr>



    <tr>

        <td>开营,成功激励团队建设</td>
        <td>团队展示 流程管理</td>
        <td>约翰库缇斯 无臂女人感恩坚持</td>
        <td>激情开营</td>
        <td>韩教授</td>
    </tr>



    <tr>

        <td>开营,成功激励团队建设</td>
        <td>团队展示 流程管理</td>
        <td>约翰库缇斯 无臂女人感恩坚持</td>
        <td>激情开营</td>
        <td>韩教授</td>
    </tr>




    </tbody>


</table>




    <br>

    <div class="actions">
        <button type="button" class="btn js-play btn-default">播放</button>
        <button type="button" class="btn js-pause btn-default">暂停</button>
        <button type="button" class="btn js-stop btn-default">停止</button>
        <button type="button" class="btn js-rewind btn-default">后退</button>
        <button type="button" class="btn js-forward btn-default">前进</button>
        <!--<button type="button" id="capture" class="btn js-forward btn-default" onclick="captureImage();">截图</button>-->
        <button type="button" class="btn js-forward btn-default" onclick="dom_to_image();">截图1</button>
        <button type="button" id="capture" class="btn js-forward btn-default">截图</button>
    </div>
</div>
<script>

    var node = document.getElementById('tb');

    var dom_to_image = function () {

        domtoimage.toPng(node)
            .then(function (dataUrl) {
                var img = new Image();
                img.src = dataUrl;
                document.body.appendChild(img);
            })
            .catch(function (error) {
                console.error('oops, something went wrong!', error);
            });

    }
</script>

 

 

 

 

 

参考资料:

http://odetocode.com/blogs/scott/archive/2013/01/04/capturing-html-5-video-to-an-image.aspx

http://www.bootcdn.cn/html2canvas/

http://html2canvas.hertzen.com/

https://github.com/niklasvh/html2canvas

https://github.com/tsayen/dom-to-image

https://www.npmjs.com/package/dom-to-image

https://github.com/eligrey/FileSaver.js/

http://www.bootcdn.cn/FileSaver.js/

 

© 著作权归作者所有

高处胜寒

高处胜寒

粉丝 9
博文 214
码字总数 148549
作品 0
西安
程序员
私信 提问
外媒:HTML5取代不了Flash

美国知名IT网站彼得·威纳(Peter Wayner)今日撰写评论文章,称虽然HTML5不会取代Flash或Shockwave,但它将会对互联网的很多方面做出改进,使网站具备更丰富的功 能,包括跟踪用户位置和在云...

红薯
2010/06/24
1K
0
ShearPhoto 2.0 发布,支持HTML5本地截取头像,支持美图秀秀特效,支持几十M数码相片压缩截取

从shearphoto 1.5直接跳跃到shearphoto 2.0,这是shearphoto重大革新。本来我是想shearphoto 1.6 、1.7、 1.8 慢慢升的,但是这样升级只会让shearphoto慢慢走向灭亡!结果我又辛苦了一个多星...

明哥先生
2015/09/05
3.6K
15
vue网页端web聊天IM实例|仿微信客户端vue版

前段时间就有使用html5技术开发过一个web版聊天系统,后来想着用vue技术开发一版,后面由于各种事情,一直没能落定。最近有些空闲就使用vue开发了一个vueWechat聊天室项目。 使用了Vue2.5.6+...

xiaoyan2015
05/01
0
0
如何使用HTML5实现拍照上传应用

在HTML5规范的支持下,WebApp在手机上拍照已经成为可能。在下面,我将讲解Web App如何用手机进行拍照,显示在页面上并上传到服务器。 1、 视频流 HTML5 The Media Capture API提供了对摄像头...

彭博
2012/04/12
1K
0
分享7个漂亮的HTML5视频音频播放器及源码

网页视频音频播放器大家并不陌生,在IE中我们可以运行ActiveX来嵌入微软的Media Player或者其他的本地播放器,当然可能大部分我们都是使用Flash来制作播放器。在HTML5发展迅速的今天,让我们...

tp_wire
2012/07/11
34.3K
5

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
15
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
15
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部