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" onclick="  (this)">
                    <div class="col-6" id="vi1">
                        <div id="asd">
                            <video src="#"></video>
                        </div>
                    </div>
                    <canvas class="col-6" id="video1" onclick="selected(this)"></canvas>
                </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();
                $("#row").append('<canvas class="col-6" id="video2" onclick="selected(this)"></canvas>');
                let base64 = $("#"+currentDom)[0].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