32 Star 116 Fork 50

RockYang / YYGraft-在线涂鸦工具

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
server.html 5.85 KB
一键复制 编辑 Web IDE 原始数据 按行查看 历史
RockYang 提交于 2017-10-09 16:44 . feat: 实现消息的推送功能。
<!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>
JavaScript
1
https://gitee.com/blackfox/scrawl.git
git@gitee.com:blackfox/scrawl.git
blackfox
scrawl
YYGraft-在线涂鸦工具
master

搜索帮助

14c37bed 8189591 565d56ea 8189591