HTML5 视频、图片截图实例

最新推荐文章于 2023-06-20 00:35:01 发布

weixin_33862188

最新推荐文章于 2023-06-20 00:35:01 发布

阅读量236

点赞数

原文链接：https://my.oschina.net/yjft/blog/1528464

版权

为什么80%的码农都做不了架构师？>>>

(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" οnclick="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="截图" οnclick="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" οnclick="captureImage();">截图</button>-->
        <button type="button" class="btn js-forward btn-default" οnclick="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/

转载于:https://my.oschina.net/yjft/blog/1528464