baoshi-was/resources/views/test.blade.php

@extends('layouts.app')


@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="h-1 w-100 text-center font-weight-bold mb-2 text-dark"></div>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-10">
                <div class="row m-0" id="row">
                    <div class="col-6">
                        <div class="rounded p-0" id="video-1" onclick="selected(this)">
                            测试测试
                            <div class="rounded w-100" controls style="min-height: 500px;object-fit: fill" src="{{asset("123.mp4")}}"></div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="rounded p-0" id="video-2" onclick="selected(this)">
                            <video class="rounded w-100" controls style="min-height: 500px;object-fit: fill" src="{{asset("123.mp4")}}"></video>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-2 border-left border-3 border-primary text-center">
                <button class="btn btn-danger" type="button" id="imgPool"></button>
            </div>
        </div>
    </div>

    <script>
        let currentDom = "";
        let hidden = false;
        function selected(e){
            if (currentDom === e.id)return;
            if (currentDom)$("#"+currentDom).css('box-shadow','');
            currentDom = e.id;
            e.style.boxShadow = "0 0 10px 2px red";
        }
        document.onkeydown = function(ev) {
            if(ev.keyCode === 32 && currentDom) {
                ev.preventDefault();
                html2canvas(document.getElementById(currentDom)).then(canvas=> {
                    let base64 = canvas.toDataURL('images/png');
                    let imgPool = $("#imgPool");
                    if (!hidden){
                        imgPool.after("<button class='btn btn-success mt-2 mb-0' type='button' onclick='uploadImg()'>上 传 截 图</button>");
                        hidden = true;
                    }
                    imgPool.after("<div class='w-100 mt-2 h-auto' ondblclick='removeImg(this)'><img class='img-fluid images' alt='截图' src='"+base64+"'></div>");
                });
            }
        };
        function removeImg(e) {
            e.remove();
        }
        function uploadImg() {
            let list = $(".images");
            list.each((i,dom)=>{
                let base64 = dom.src;
                //单次多请求上传
            });
        }
    </script>
@endsection

@section('script')
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
@stop