|
|
@@ -1,126 +0,0 @@
|
|
|
-@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
|