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" id="vi1" onclick="selected(this)">
                        <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>
            <img style="width: 50px;height: 100px" src="{{asset('images/demoBin.png')}}" class="image" onclick="imgShow(this)">
            <div id="outer" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
            <div id="inner" style="position:absolute;">
                <img alt="" id="bm" style="border:5px solid #fff;" src="" />
            </div>
        </div>
    </div>

    <script type="text/javascript">
        /*$(function(){
            $(".image").click(function(){
                var _this = $(this);//将当前的pimg元素作为_this传入函数
                imgShow("#outer", "#inner", "#bm", _this);
            });
        });*/
        function imgShow(e,outer="#outer", inner="#inner", bm="#bm"){
            let src = e.src;
            $(bm).attr("src", src);
            let img = $("<img alt='' src='"+src+"'/>");
            img.on('load',function(){
                let windowW = $(window).width();
                let windowH = $(window).height();
                let realWidth = this.width;
                let realHeight = this.height;
                let imgWidth, imgHeight;
                let scale = 0.8;
                if(realHeight>windowH*scale) {
                    imgHeight = windowH*scale;
                    imgWidth = imgHeight/realHeight*realWidth;
                    if(imgWidth>windowW*scale) {
                        imgWidth = windowW*scale;
                    }
                } else if(realWidth>windowW*scale) {
                    imgWidth = windowW*scale;
                    imgHeight = imgWidth/realWidth*realHeight;
                } else {
                    imgWidth = realWidth;
                    imgHeight = realHeight;
                }
                $(bm).css("width",imgWidth);
                let w = (windowW-imgWidth)/2;
                let h = (windowH-imgHeight)/2;
                $(inner).css({"top":h, "left":w});
                $(outer).fadeIn("fast");
            });
            $(outer).click(function(){
                $(this).fadeOut("fast");
            });
        }


        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 = getBase64Img();
                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>");
            }
        };
        //获取base64截图
        function getBase64Img(){
            let canvas = $('<canvas></canvas>');
            let video = $("#"+currentDom).children().children()[0];
            let ctx = canvas[0].getContext('2d');
            let w = video.videoWidth;
            let h = video.videoHeight;
            canvas.attr({
                width: w,
                height: h,
            });
            ctx.drawImage(video, 0, 0, w, h);
            return canvas[0].toDataURL('images/png');
        }
        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