会议排位demo，可拖拽，可下载截图

前段代码
<html>

<head>

<title>会议座位安排</title>

<style type="text/css">

*{padding:0;margin:0;}

.tips{position:absolute;background:#eee;}
.add {position: fixed;right: 0;top: 0}
#tu{
    width: 564px;
    height: 330px;
    background: red
    /*background: url('u=3318199716,2583790385&fm=26&gp=0.jpg');*/
}
</style>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script> 
</head>

<body  >


<div id="tu"></div>
<!-- <div class="tips" id="tips1" onmouseover="dragF.drag('tips1');">

<img src="/images/skinslogo.gif"><br>图片可以拖动</div>
 -->
<!-- <div class="tips" id="tips2" onmouseover="dragF.drag('tips2');">座位1
</div>
<div class="tips" id="tips3" onmouseover="dragF.drag('tips3');">座位2
</div>
 --><div  class="add">
<input id="dan_input" type="text" value="">
<button onclick="return addDanMu()">添加座位</button>
<input  id="jie_input"  type="button" value='下载'>  
          

</div>



</body>

<script type="text/javascript">

var $id=function(id){return document.getElementById(id);}

var dragF={

 locked:false,

 lastObj:undefined,

 drag:function(obj){

  $id(obj).onmousedown=function(e){

   var e = e ? e : window.event;

   if(!window.event) {e.preventDefault();}/* 阻止标注<a href='/site/js-5791-1.html' target='_blank'><u>浏览器</u></a>下拖动a,img的默认事件 */

   dragF.locked=true;

     $id(obj).style.position="absolute";

   $id(obj).style.zIndex="100";

   if (dragF.lastObj&&dragF.lastObj!=$id(obj)) {/* 多元素拖动需要恢复上次元素状态 */

    dragF.lastObj.style.zIndex = "1";

   }

   dragF.lastObj=$id(obj);

   var tempX=$id(obj).offsetLeft;

   var tempY=$id(obj).offsetTop;

   dragF.x=e.clientX;

   dragF.y=e.clientY;

   document.onmousemove=function(e){

    var e = e ? e : window.event;

    if(dragF.locked==false) return false;

    $id(obj).style.left=tempX+e.clientX-dragF.x+"px";

    $id(obj).style.top=tempY+e.clientY-dragF.y+"px";

    if(window.event) {e.returnValue=false;}/* 阻止ie下a,img的默认事件 */

   }

   document.onmouseup=function(){

    dragF.locked=false;

   }

  }

 }

}

</script>
<script>
function addDanMu(){
    var dan = document.getElementById("dan_input").value;       
    if(dan ==""){
        alert("请输入弹幕~");
        return false;
    }else{
        document.getElementById("dan_input").value = "";   //清空 弹幕输入框
        // var br = document.createElement("BR");  // <br />
        var node = document.createElement("DIV");  // <div>
        var tipsArr = document.getElementsByClassName('tips');
        var  i;
        // console.log(parseInt(tipsArr[tipsArr.length-1].id.substr(4))+1);
        if (tipsArr.length==0) {
            i=1
        }else{

          i =parseInt(tipsArr[tipsArr.length-1].id.substr(4))+1;
        }
        // var aNode = document.createElement("P");   // <p>
        node.setAttribute("class","tips");
        node.setAttribute("id","tips"+i);
        node.setAttribute("onmouseover","dragF.drag('tips"+i+"');");
        var textnode = document.createTextNode(dan);   // 创建个 文本节点， 将用户输入的弹幕，存入 创建的 元素节点 <p>  中
        // aNode.appendChild(textnode);
        node.appendChild(textnode);
       // document.body.appendChild(br);
        // document.body.appendChild(node);

        document.getElementById("tu").appendChild(node);



        return true;
    }
    
    
}

</script>

<script  type="text/javascript" >  
               $("#jie_input").on("click", function(event) {  
                        event.preventDefault();  
                        html2canvas(document.getElementById("tu")).then(function(canvas) {
                            var dataUrl = canvas.toDataURL();
                            var newImg = document.createElement("img");
                            newImg.src =  dataUrl;
                            // document.body.appendChild(newImg);
                            // console.log(dataUrl)
                            this.downloadFile('测试.png', dataUrl);

                        });   
                }); 

                  //下载
     function downloadFile(fileName, content){
        let aLink = document.createElement('a');
        let blob = this.base64ToBlob(content); //new Blob([content]);

        let evt = document.createEvent("HTMLEvents");
        evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
        aLink.download = fileName;
        aLink.href = URL.createObjectURL(blob);

        // aLink.dispatchEvent(evt);
        //aLink.click()
        aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐
      }
      //base64转blob
      function base64ToBlob(code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;

        let uInt8Array = new Uint8Array(rawLength);

        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {type: contentType});
      }
  

     

        </script>  

</html>
会议排位demo，可拖拽，可下载截图

猜你喜欢
