web大作业（9）共享涂鸦的实现

最新推荐文章于 2024-08-11 22:56:27 发布

spring__festival

最新推荐文章于 2024-08-11 22:56:27 发布

阅读量311

点赞数 1

文章标签： node.js

本文链接：https://blog.csdn.net/spring__festival/article/details/107001606

版权

要实现教师端上传图片，进行标注并下发到学生端，需要使用websocket或socket.io。使用npm 安装socket.io。下面是教师端绘图和学生端绘图的网页源代码。

教师端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘图</title>
</head>
<script src="jquery.js"></script>
<body>
    <div class="paint">
        <canvas id="canvas" width="500" height="400" style="border:1px solid #c3c3c3;"></canvas>
    </div>
    <input accept="image/*"  type="file" id="uploadIMG"  onchange="btnUploadFile(event)"/>
</body>
<script src="./socket.io.js"></script>
<script>
    var socket = io("http://localhost:3000");
    socket.on('connect',function(){
        console.log('连接成功')
    })
    socket.on('disconnect',function(){
        console.log('断开连接')
    })

    function btnUploadFile(e,type){
        var files = e.target.files;
        var file = files[0];
        if (!/\/(?:jpeg|jpg|png)/i.test(file.type)){
            return;
        }
        
        var reader = new FileReader();
        reader.onload = function() { 
            var result = this.result;  
            socket.emit("send",result)
        };
        reader.readAsDataURL(file);    
    }
    socket.on('msg',function(data){
        var img=new Image()
        //console.log(data)
        img.src=data;
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        //console.log(result)
        img.onload = function(){
            context.drawImage(img,0,0,500,400);
        }
    })

    window.onload=function(){
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        paint(context);
    }
    function paint(context){
        var temp = false;
        $("canvas").mousedown(function(e){
            temp=true;
            var x = e.pageX-8;
            var y = e.pageY-8;
            context.moveTo(x,y);
            socket.emit("send1",[x,y])
        })
        $("canvas").mousemove(function(e){
            var x = e.pageX-8;
            var y = e.pageY-8;
            //$("#info").html("( "+x+" , "+y+" )");
            socket.emit("send2",[x,y])
            if(temp){
                context.lineTo(x,y);
                context.stroke();
            }
        })
        $("canvas").mouseup(function(e){
            temp=false;
            socket.emit("send3",1)
        })
    }
</script>
</html>

学生端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>看图</title>
</head>
<script src="jquery.js"></script>
<body>
    <div class="paint">
        <canvas id="canvas" width="500" height="400" style="border:1px solid #c3c3c3;"></canvas>
    </div>
</body>
<script src="./socket.io.js"></script>
<script src="../node_modules/socket.io-client/dist/socket.io.js"></script>
<script>
    var socket = io("http://localhost:3000");
    socket.on('connect',function(){
        console.log('连接成功')
    })
    socket.on('msg',function(data){
        var img=new Image()
        img.src=data;
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        //console.log(result)
        img.onload = function(){
            context.drawImage(img,0,0,500,400);
        }
    })
    socket.on('disconnect',function(){
        console.log('断开连接')
    })

    window.onload=function(){
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        var temp = false;
        socket.on('msg1',function(data){
            temp=true;
            var x=data[0];
            var y=data[1];
            context.moveTo(x,y);
        })
        socket.on('msg2',function(data){
            var x=data[0];
            var y=data[1];
            if(temp){
                context.lineTo(x,y);
                context.stroke();
            }
        })
        socket.on("msg3",function(data){
            if(data==1){
                temp=false;
            }
        })
    }

    
</script>
</html>

以及路由：

var app = express();

var server = require("http").createServer(app);
var io = require('socket.io')(server);
io.on('connection',function(socket){
  socket.on("send",function(data){
    io.emit("msg",data)
  })
  socket.on("send1",function(data){
    io.emit("msg1",data)
  })
  socket.on("send2",function(data){
    io.emit("msg2",data)
  })
  socket.on("send3",function(data){
    io.emit("msg3",data)
  })
  socket.on('reply',function(){})
})

这里做一些简单的说明，首先是教师端使用socket.emit(“内容名”,内容)向服务器上传信息，服务器使用socket.on(“内容名”,function(data){ io.emit(内容名2，内容) })将信息传递给所有客户端，客户端再通过socket.on(“内容名2”,function(data){ 处理内容 })，这样就实现了共享。

spring__festival

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
web大作业（9）共享涂鸦的实现

要实现教师端上传图片，进行标注并下发到学生端，需要使用websocket或socket.io。使用npm 安装socket.io。下面是教师端绘图和学生端绘图的网页源代码。教师端：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1
复制链接

扫一扫