画图板用c++实现和用js实现的websocket版本
画图板
opencv的c++
参考
http://blog.csdn.net/morewindows/article/details/8426283
html版本，+tomcat7的websocket
LineWebSocketServlet.java
web.xml
opencv的c++
#include <opencv2/opencv.hpp>
using namespace std;
#pragma comment(linker, "/subsystem:\"windows\" /entry:\"mainCRTStartup\"")
const char *pstrWindowsMouseDrawTitle = "鼠标绘图(http://blog.csdn.net/MoreWindows)";
// 鼠标消息的回调函数
void on_mouse(int event, int x, int y, int flags, void* param)
{
static bool s_bMouseLButtonDown = false;
static CvPoint s_cvPrePoint = cvPoint(0, 0);
switch (event)
{
case CV_EVENT_LBUTTONDOWN:
s_bMouseLButtonDown = true;
s_cvPrePoint = cvPoint(x, y);
break;
case CV_EVENT_LBUTTONUP:
s_bMouseLButtonDown = false;
break;
case CV_EVENT_MOUSEMOVE:
if (s_bMouseLButtonDown)
{
CvPoint cvCurrPoint = cvPoint(x, y);
cvLine((IplImage*)param, s_cvPrePoint, cvCurrPoint, CV_RGB(0, 0, 20), 3);
s_cvPrePoint = cvCurrPoint;
cvShowImage(pstrWindowsMouseDrawTitle, (IplImage*)param);
}
break;
}
}
int main()
{
const int MAX_WIDTH = 500, MAX_HEIGHT = 400;
const char *pstrSaveImageName = "MouseDraw.jpg";
IplImage *pSrcImage = cvCreateImage(cvSize(MAX_WIDTH, MAX_HEIGHT), IPL_DEPTH_8U, 3);
cvSet(pSrcImage, CV_RGB(255, 255, 255)); //可以用cvSet()将图像填充成白色
cvNamedWindow(pstrWindowsMouseDrawTitle, CV_WINDOW_AUTOSIZE);
cvShowImage(pstrWindowsMouseDrawTitle, pSrcImage);
cvSetMouseCallback(pstrWindowsMouseDrawTitle, on_mouse, (void*)pSrcImage);
int c;
do{
c = cvWaitKey(0);
switch ((char)c)
{
case 'r':
cvSet(pSrcImage, CV_RGB(000, 000, 255));
cvShowImage(pstrWindowsMouseDrawTitle, pSrcImage);
break;
case 's':
cvSaveImage(pstrSaveImageName, pSrcImage);
break;
}
} while (c > 0 && c != 27);
cvDestroyWindow(pstrWindowsMouseDrawTitle);
cvReleaseImage(&pSrcImage);
return 0;
}
参考
http://blog.csdn.net/morewindows/article/details/8426283
html版本，+tomcat7的websocket
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jiben</title>
</head>
<script type="text/javascript">
//--------------line----begin-------
var w=1;
var h=1;
var col="blue";
function catchMouse(){
var x=event.clientX-50;
var y=event.clientY-52;
makedot(x,y);
if (ws != null) {
ws.send(x+","+y);
}
}
function makedot(x,y){
var sp=document.getElementById("sspp");
sp.insertAdjacentHTML("BeforeEnd","<hr style='position:absolute;left:"+x+"px;top:"+y+"px;width:"+w+"px;height:"+h+"px;color:"+col+";'>");
}
function myMouseDown(){
document.onmousemove=catchMouse
}
function myMouseUp(){
document.onmousemove=null;
}
//--------------line----end---------
</script>
<script type="text/javascript">
var ws = null;
function log(text) {
document.getElementById("log").innerHTML = text + "<br>"+ document.getElementById("log").innerHTML;
}
function startServer() {
var url = document.getElementById("serverip").value;
if ('WebSocket' in window) {
ws = new WebSocket(url);
} else if ('MozWebSocket' in window) {
ws = new MozWebSocket(url);
} else {
log('浏览器不支持');
return;
}
ws.onopen = function() {
//log('Opened!');
};
ws.onmessage = function(event) {
//log(event.data);
var x_value =event.data.split(",")[0];
var y_value = event.data.split(",")[1];
makedot(x_value,y_value);
};
ws.onclose = function() {
//log('Closed!');
}
}
function sendMessage() {
var textMessage = document.getElementById("textMessage").value;
if (ws != null && textMessage != "") {
ws.send(textMessage);
}
}
function stopconn() {
ws.close();
}
</script>
<body onload="startServer()">
<input id="serverip" type="text" size="20" style="display:none"
value="ws://182.254.155.000:8080/webs/websocket/line" />
<div id="log" style="display:none"></div>
<span id="sspp" onMouseDown="myMouseDown()" onMouseUp="myMouseUp()" style="position:absolute;top:50px;left:50px;width:1000px;height:1000px;background-color:#eeeeee ">
</span>
</body>
</html>
LineWebSocketServlet.java
package com.hao;
import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.apache.catalina.websocket.MessageInbound;
import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;
import org.apache.catalina.websocket.WsOutbound;
public class LineWebSocketServlet extends WebSocketServlet {
private static Map<String,MyMessageInbound> mmiList = new HashMap<String,MyMessageInbound>();
protected StreamInbound createWebSocketInbound(String subProtocol,
HttpServletRequest arg1) {
return new MyMessageInbound();
}
private class MyMessageInbound extends MessageInbound {
WsOutbound myoutbound;
String mykey;
@Override
public void onOpen(WsOutbound outbound) {
try {
System.out.println("Open Client.");
this.myoutbound = outbound;
mykey ="open "+System.currentTimeMillis();;
mmiList.put(mykey, this);
System.out.println("mmiList size:"+mmiList.size());
outbound.writeTextMessage(CharBuffer.wrap(mykey));
} catch (IOException e) {
e.printStackTrace();
}
}
@Override
public void onClose(int status) {
System.out.println("Close Client.");
mmiList.remove(mykey);
}
@Override
protected void onBinaryMessage(ByteBuffer arg0) throws IOException {
}
@Override
protected void onTextMessage(CharBuffer message) throws IOException {
System.out.println("LineWebSocketServlet.onTextMessage--->" + message.toString());
for (Map.Entry<String, MyMessageInbound> entry : mmiList.entrySet()) {
MyMessageInbound mmib = (MyMessageInbound) entry.getValue();
CharBuffer buffer = CharBuffer.wrap(message);
mmib.myoutbound.writeTextMessage(buffer);
mmib.myoutbound.flush();
}
}
}
}
web.xml
<servlet>
<servlet-name>wsLine</servlet-name>
<servlet-class>com.hao.LineWebSocketServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>wsLine</servlet-name>
<url-pattern>/websocket/line</url-pattern>
</servlet-mapping>