JS实现页面或视频截图

1. 页面Dmo截图：

 @*创建需要截图的元素*@
<div class="layui-input-block videoDiv" id="video_div" style="background-color:forestgreen">
    <h1 style="color:white;text-align:center;margin-top:10vh;">TEST</h1>
</div>

@*创建需要盛放的盒子*@
<div class="toCanvas">

</div>

<input type="button" id="jtBtn" class="layui-btn layui-btn-primary toPic" value="截图" />

 function jtBtn() {
            $("#jtBtn").click(function () {
                var test = $("#video_div").get(0); //将jQuery对象转换为dom对象

                // 调用html2canvas插件
                html2canvas(test).then(function (canvas) {
                    // canvas宽度
                    var canvasWidth = canvas.width;
                    // canvas高度
                    var canvasHeight = canvas.height;
                    // 渲染canvas
                    $('.toCanvas').after(canvas);
                    // 显示‘转成图片’按钮
                    $('.toPic').show(1000);
                    // 点击转成图片
                    $('.toPic').click(function (e) {
                        // 调用Canvas2Image插件
                        var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
                        // 渲染图片
                        $(".toPic").after(img);
                        // 点击保存
                        //$('#save').click(function (e) {
                            let type = $('#sel').val(); //图片类型
                            let w = $('#imgW').val(); //图片宽度
                            let h = $('#imgH').val(); //图片高度
                            let f = $('#imgFileName').val(); //图片文件名
                            w = (w === '') ? canvasWidth : w; //判断输入宽高是否为空，为空时保持原来的值
                            h = (h === '') ? canvasHeight : h;
                            // 调用Canvas2Image插件
                            Canvas2Image.saveAsImage(canvas, w, h, type, f);
                        //});
                    });
                });
            })
        }

 实现效果：

 注：这种方法需要我们引入JS:canvas2image.js、html2canvas.min.js，想实现下载功能的看第2点方法。

2.截取Video图片：

 @*创建需要截图的元素*@
<div class="layui-input-block videoDiv" id="video_div" style="background-color:forestgreen">
    <h1 style="color:white;text-align:center;margin-top:10vh;">TEST</h1>
</div>

 @*创建需要盛放的盒子*@
<div class="cutImg" id="cutImage" v-if="imgShow">

</div>

<input class="cutLargreen layui-btn layui-btn-primary" onclick="screenShot()" value="截屏">

function screenShot() {
            var player = document.getElementById("streetVideo");   //获取video的Dom节点
            player.setAttribute("crossOrigin", "anonymous");  //添加srossOrigin属性，解决跨域问题
            var canvas = document.createElement("canvas");
            var img = document.createElement("img");
            canvas.width = player.clientWidth;
            canvas.height = player.clientHeight;
            canvas.getContext("2d").drawImage(player, 0, 0, canvas.width, canvas.height);//截
            var dataURL = canvas.toDataURL("image/png");  //将图片转成base64格式
            img.src = dataURL;
            img.width = player.clientWidth - 200;   //控制截出来的图片宽的大小
            img.height = player.clientHeight - 200; //控制截出来的图片高的大小
            img.style.border = "1px solid #333333"   //控制截出来的图片边框的样式
            document.getElementById("cutImage").appendChild(img);   //显示在页面中
            this.downFile(dataURL, "图片.jpg");   //下载截图
        }


 //下载截图
        function downFile(data, fileName) {
            var save_link = document.createElementNS(
                "http://www.w3.org/1999/xhtml",
                "a"
            ); //有效的内部空间URI
            save_link.href = data;
            save_link.download = fileName;
            var event = document.createEvent("MouseEvents");
            event.initMouseEvent(
                "click",
                true,
                false,
                window,
                0,
                0,
                0,
                0,
                0,
                false,
                false,
                false,
                false,
                0,
                null
            );
            save_link.dispatchEvent(event);
        }

实现效果：