|
|
@@ -10,8 +10,8 @@
|
|
|
</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 class="row m-0" id="row" >
|
|
|
+ <div class="col-6" id="vi1" onclick="selected(this)">
|
|
|
<div id="asd">
|
|
|
<video src="#"></video>
|
|
|
</div>
|
|
|
@@ -22,10 +22,56 @@
|
|
|
<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>
|
|
|
+ <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;
|
|
|
@@ -39,7 +85,7 @@
|
|
|
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 base64 = getBase64Img();
|
|
|
let imgPool = $("#imgPool");
|
|
|
if (!hidden){
|
|
|
imgPool.after("<button class='btn btn-success mt-2 mb-0' type='button' onclick='uploadImg()'>上 传 截 图</button>");
|
|
|
@@ -48,6 +94,20 @@
|
|
|
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();
|
|
|
}
|
LD