[js] 前端小工具合集 - 2 插件

 小工具：ajax，截屏,彈窗，websocket,提示框

let fn_open = {
 //截屏
   cut = function(){
        html2canvas(document.body, {
            allowTaint: true,
            taintTest: false,
            onrendered: function(canvas) {
                canvas.id = "DIVcanvas";
                var dataUrl = canvas.toDataURL(); //生成base64圖片數據
                fn_open.openCutImg(dataUrl);
                var a = $("<a></a>").attr("href", dataUrl).attr("download",                                "img.png");
	            $("body").append(a);
            }
        });
    }

    /**
     * 彈出截圖框
     */
    openCutImg : function(dataUrl){
        layer.open({
            type: 1 //此處以iframe舉例
            ,title: '截圖'
            ,shade: 0
            ,area: ['40%','50%']
            ,maxmin: true
            ,content: '<div id="DivCutImg" style="width:100%;height:100%;"></div>'
            ,success: function(){
                let newImg = document.createElement("img");
                newImg.src =  dataUrl;
                newImg.width = $("#DivCutImg").width();
                newImg.height = $("#DivCutImg").height();
                $('#DivCutImg').empty().append(newImg);
            }
          });
    },
    /**
     * 通用彈出框
     */
    openCommonDiv :function(v){
        if(v  == undefined && v == null){
            fn_tool.alert("沒有獲取到彈出屬性!");
            return false;
        }
        layer.open({
            type: 1 //此處以iframe舉例
            ,id:v.id
            ,title: v.title
            ,shade: 0
            ,offset : v.offset
            ,area: v.area
            ,btn:v.btn == undefined ? false: v.btn
            ,btn1:function(){
                if(typeof v.btn1 == 'function'){
                    v.btn1();
                }
            }
            ,maxmin: true
            ,content: v.content
            ,success: function(){
               if(typeof v.fn == 'function'){
                   v.fn();
               }
            },
            end:function(){}

          });
    }
}

let fn_tool = {
    //提示框
    alert : function(m){
        layer.msg(m,{ icon:2, time:1500, shade:0.4});
    },
    //ajax
    ajax : function(a){
        $.ajax({
            url:a.url,
            type:'post',
            dataType:'application/json',
            data:JSON.stringify(a.data),
            success:function(data){
                if(typeof a.fn == 'function'){
                    a.fn(data);
                }
            },
            error:function(error){
               fn_tool.alert(error);
         }
        });
    },
    webSocket : { //websocket客戶端
        ws : null,
        init:function(){
            fn_tool.webSocket.ws = new WebSocket("ws://localhost:8888/ws");
            fn_tool.webSocket.on();
        },
        on : function(){
            fn_tool.webSocket.ws.onopen = function(){
                fn_tool.alert('連接成功');
            }
            fn_tool.webSocket.ws.onmessage  = function(event){
                fn_tool.alert('收到消息');
            }
            fn_tool.webSocket.ws.onclose = function(){
                fn_tool.alert('關閉連接');
            }
            fn_tool.webSocket.ws.onerror = function(){
                cfn_tool.alert('發生異常');
            }
        },
        send : function(obj){
            fn_tool.webSocket.ws.send(JSON.stringify(obj.data));
        }
    }
}