master

分支 (1)

标签 (2)

管理

管理

master

v1.0.1

v1.0.0

scrawl
/
server.html

<!DOCTYPE html>
<html>
<head>
    <title>在线涂鸦工具-服务端</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="robots" content="noindex, nofollow"/>
    <link rel="stylesheet" type="text/css" href="css/scrawl.css">
</head>
<body>
<div class="scrawl-main" id="scrawl-main">
    <div class="hot">
        <div class="drawBoard border_style">
            <canvas id="canvas-borad" class="brushBorad">你的浏览器不支持 canvas 绘图</canvas>
            <div class="picBoard" id="picBoard" style=""></div>
        </div>

        <div class="operateBar">
            <button id="J_prevStep" class="prevStep" title="上一步">
                <em class="icon"></em>
            </button>
            <button id="J_nextStep" class="nextStep" title="下一步">
                <em class="icon"></em>
            </button>
            <button id="J_clearBoard" class="clearBoard" title="清空">
                <em class="icon"></em>
            </button>
            <!--<span id="J_sacleBoard" class="scaleBoard">-->
                <!--<em class="icon"></em>-->
                <!--<em class="text">缩放背景</em>-->
            <!--</span>-->
        </div>
    </div>
    <div class="drawToolbar border_style">
        <div class="colorBar">
            <span data-color="#0099CC" style="background:#0099CC;" class="active"></span>
            <span data-color="#003366" style="background:#003366;"></span>
            <span data-color="#993333" style="background:#993333;"></span>
            <span data-color="#FF9900" style="background:#FF9900;"></span>
            <span data-color="#0000CC" style="background:#0000CC;"></span>
            <span data-color="#CC3333" style="background:#CC3333;"></span>

            <span data-color="#F4D03F" style="background:#641E16;"></span>
            <span data-color="#4A235A" style="background:#4A235A;"></span>
            <span data-color="#009966" style="background:#009966;"></span>
            <span data-color="#ffff00" style="background:#ffff00;"></span>
            <span data-color="#7D6608" style="background:#7D6608;"></span>
            <span data-color="#FF33CC" style="background:#FF33CC;"></span>

            <span data-color="#990066" style="background:#990066;"></span>
            <span data-color="#ffffff" style="background:#ffffff;"></span>
            <span data-color="#9bbb59" style="background:#9bbb59;"></span>
            <span data-color="#CCFFFF" style="background:#CCFFFF;"></span>
            <span data-color="#FFCCCC" style="background:#FFCCCC;"></span>
            <span data-color="#CC99CC" style="background:#CC99CC;"></span>
        </div>

        <div class="sectionBar">
            <em class="brushIcon"></em>
            <a href="javascript:void(0)" class="brush-size size1">1</a>
            <a href="javascript:void(0)" class="brush-size size2">3</a>
            <a href="javascript:void(0)" class="brush-size size3">5</a>
            <a href="javascript:void(0)" class="brush-size size4">7</a>
        </div>
        <div class="sectionBar">
            <em class="eraserIcon"></em>
            <a href="javascript:void(0)" class="eraser-size size1">5</a>
            <a href="javascript:void(0)" class="eraser-size size2">10</a>
            <a href="javascript:void(0)" class="eraser-size size3">15</a>
            <a href="javascript:void(0)" class="eraser-size size4">20</a>
        </div>

        <div class="sectionBar">
            <em class="blurIcon"></em>
            <a href="javascript:void(0)" class="blur-size size1">2</a>
            <a href="javascript:void(0)" class="blur-size size2">4</a>
            <a href="javascript:void(0)" class="blur-size size3">6</a>
            <a href="javascript:void(0)" class="blur-size size4">8</a>
        </div>

        <div class="sectionBar">
            <span id="clearSetting" class="clearSetting">
                <em class="icon"></em>
                <em class="text">初始化设置</em>
            </span>
        </div>

        <div class="sectionBar">
            <div id="J_addImg" class="addImgH">
                <em class="icon"></em>
                <em class="text">添加背景</em>
                <input type="file" class="upload" id="J_canvas_bg"
                       accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"/>

            </div>
        </div>

        <div class="sectionBar">
            <span id="J_removeImg" class="removeImg">
                <em class="icon"></em>
                <em class="text">删除背景</em>
            </span>
        </div>

        <div class="sectionBar">
            <span id="J_saveImg" class="saveImg">
                <em class="icon"></em>
                <em class="text">保存图片</em>
            </span>
        </div>

    </div>
</div>

<script type="text/javascript" src="libs/jquery.min.js"></script>
<script type="text/javascript" src="libs/YYGraft.js"></script>

<script>
    var socket = new WebSocket('ws://localhost:50001');
    socket.onopen = function(event) {

        //监听Socket的关闭
        socket.onclose = function(event) {
            console.log('Client notified socket has closed',event);
        };

    };

    new Canvas({
        canvasId : "canvas-borad",
        width : 700,
        height : 500,
        save : function(data) {
            $.post("upload.php", {imgBase64: data}, function(res) {
                if (res.code == "000") {
                	alert("图片保存成功！");
                	location.href = res.url;
                } else {
                	alert(res.url);
                }
            }, "json");
        },
        onDraw : function (data) {
        	//console.log(x, y);
            socket.send(JSON.stringify(data));
        }
    });

</script>

</body>
</html>