Netty+HTML5+Canvas 网络画画板实时在线画画

采用Html5的canvas做前端画画板，发送数据到后端Netty服务，实时转发笔迹数据，在线实时同步画笔轨迹，单击绿色小方块，保存画板的图片

页面：

<!-- index.html --><!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>网络画画板</title>
</head>
<body>
<style>#box1 {width: 100px;height: 100px;background-color: green;position: absolute;}</style>
<div id="box1" onclick="save()"></div>
<canvas id="canvas" style="background-color: yellow;"></canvas><script>const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");canvas.width = 800;canvas.height = 600;let isDrawing = false;let x = 0;let y = 0;let x1 = 0;let y1 = 0;var socket = new WebSocket("ws://localhost:9911/websocket");socket.onopen = function(event) {console.log("WebSocket opened: " + event);};socket.onmessage = function(event) {//console.log("WebSocket message received: " + event.data);var str = event.data.split("_");if(str[0]==='B'){switch (str[1]) {case '37':box1.style.left = str[2];break;case '39':box1.style.left = str[2] ;break;case '38':box1.style.top = str[2] ;break;case '40':box1.style.top = str[2] ;break;}}else if(str[0]==='mousedown'){ctx.beginPath();ctx.strokeStyle = "red";ctx.lineWidth = 1;ctx.moveTo(str[1], str[2]);}else if(str[0]==='mousemove'){ctx.lineTo(str[1], str[2]);ctx.stroke();}};socket.onclose = function(event) {console.log("WebSocket closed: " + event);};function send() {var message = document.getElementById("message").value;socket.send(message);}document.addEventListener('keydown', function(event) {if (event.keyCode === 13) {send()var txt = document.getElementById('message')txt.value = ''}speed = 10switch (event.keyCode) {case 37:box1.style.left = box1.offsetLeft - speed + "px";socket.send("B_"+event.keyCode+"_"+box1.style.left)break;case 39:box1.style.left = box1.offsetLeft + speed + "px";socket.send("B_"+event.keyCode+"_"+box1.style.left)break;case 38:box1.style.top = box1.offsetTop - speed + "px";socket.send("B_"+event.keyCode+"_"+box1.style.top)break;case 40:box1.style.top = box1.offsetTop + speed + "px";socket.send("B_"+event.keyCode+"_"+box1.style.top)break;}});canvas.addEventListener("mousedown", (event) => {// console.log(event);x = event.layerX - canvas.getBoundingClientRect().left;y = event.layerY - canvas.getBoundingClientRect().top;ctx.beginPath();ctx.strokeStyle = "red";ctx.lineWidth = 1;ctx.moveTo(x, y);isDrawing = true;socket.send("mousedown_"+x+"_"+y);});canvas.addEventListener("mousemove", (event) => {//console.log(event);//console.log(event.layerX, event.layerY);if (isDrawing) {x = event.layerX - canvas.getBoundingClientRect().left;y = event.layerY - canvas.getBoundingClientRect().top;ctx.lineTo(x, y);ctx.stroke();socket.send("mousemove_"+x+"_"+y);}});canvas.addEventListener("mouseup", (event) => {isDrawing = false;});canvas.addEventListener("mouseout", (event) => {isDrawing = false;});function save(){var link = document.createElement("a");var imgData =canvas.toDataURL({format: 'png', quality:1, width:20000, height:4000});var strDataURI = imgData.substr(22, imgData.length);var blob = dataURLtoBlob(imgData);var objurl = URL.createObjectURL(blob);link.download = "grid1.png";link.href = objurl;link.click();}function  dataURLtoBlob(dataurl) {var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while(n--){u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], {type:mime});}</script>
</body>
</html>

后端：

pom：

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>org.nno</groupId><artifactId>nno</artifactId><version>1.0-SNAPSHOT</version><packaging>jar</packaging><name>nno</name><url>http://maven.apache.org</url><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding></properties><dependencies><dependency><groupId>io.netty</groupId><artifactId>netty-all</artifactId><version>4.1.18.Final</version></dependency><dependency><groupId>org.slf4j</groupId><artifactId>slf4j-log4j12</artifactId><version>2.0.5</version></dependency><dependency><groupId>org.apache.commons</groupId><artifactId>commons-lang3</artifactId><version>3.2.1</version></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.26</version></dependency></dependencies>
</project>

类：

package org.nno;
import io.netty.bootstrap.ServerBootstrap;
import io.netty.channel.ChannelFuture;
import io.netty.channel.ChannelInitializer;
import io.netty.channel.ChannelPipeline;
import io.netty.channel.EventLoopGroup;
import io.netty.channel.nio.NioEventLoopGroup;
import io.netty.channel.socket.SocketChannel;
import io.netty.channel.socket.nio.NioServerSocketChannel;
import io.netty.handler.codec.http.HttpObjectAggregator;
import io.netty.handler.codec.http.HttpServerCodec;
import io.netty.handler.codec.http.websocketx.WebSocketServerProtocolHandler;import java.util.HashSet;
import java.util.Set;public class WebSocketServer {private final int port;public WebSocketServer(int port) {this.port = port;}Set m = new HashSet();public void run() throws Exception {EventLoopGroup bossGroup = new NioEventLoopGroup();EventLoopGroup workerGroup = new NioEventLoopGroup();try {ServerBootstrap b = new ServerBootstrap();b.group(bossGroup, workerGroup).channel(NioServerSocketChannel.class).childHandler(new ChannelInitializer<SocketChannel>() {@Overridepublic void initChannel(SocketChannel ch) throws Exception {ChannelPipeline p = ch.pipeline();p.addLast(new HttpServerCodec());p.addLast(new HttpObjectAggregator(65536));p.addLast(new WebSocketServerProtocolHandler("/websocket"));p.addLast(new WebSocketServerHandler(m));}});ChannelFuture f = b.bind(port).sync();f.channel().closeFuture().sync();} finally {workerGroup.shutdownGracefully();bossGroup.shutdownGracefully();}}public static void main(String[] args) throws Exception {int port = 9911;if (args.length > 0) {port = Integer.parseInt(args[0]);}new WebSocketServer(port).run();}
}

package org.nno;
import io.netty.channel.Channel;
import io.netty.channel.ChannelHandlerContext;
import io.netty.channel.SimpleChannelInboundHandler;
import io.netty.handler.codec.http.websocketx.TextWebSocketFrame;import java.util.*;public class WebSocketServerHandler extends SimpleChannelInboundHandler<TextWebSocketFrame> {Set m = new HashSet<>();public WebSocketServerHandler(Set m) {this.m = m;}@Overridepublic void channelRead0(ChannelHandlerContext ctx, TextWebSocketFrame msg) throws Exception {// 处理消息
//        System.out.println("Received message: " + msg.text());Iterator<Channel> iterator = m.iterator();while(iterator.hasNext()){iterator.next().writeAndFlush(new TextWebSocketFrame(msg.text()));}}@Overridepublic void channelActive(ChannelHandlerContext ctx) throws Exception {// 添加连接
//        System.out.println("Client connected: " + ctx.channel());m.add(ctx.channel());}@Overridepublic void channelInactive(ChannelHandlerContext ctx) throws Exception {// 断开连接
//        System.out.println("Client disconnected: " + ctx.channel());m.remove(ctx.channel());}@Overridepublic void exceptionCaught(ChannelHandlerContext ctx, Throwable cause) throws Exception {// 异常处理cause.printStackTrace();ctx.close();}}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/429203.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Elasticsearch】-实现向量相似检索

【Elasticsearch】-实现向量相似检索

1、http请求方式 如果elasticsearch服务设置账号密码&#xff0c;则在请求的header中添加 Basic Auth 认证 请求方式&#xff1a;Post 请求地址&#xff1a;/index_name/_search 请求body&#xff1a;json格式 {"size": 10, //返回条数"min_score": 0.…
阅读更多...
二叉树——数据结构

二叉树——数据结构

这次我们来学习一下数据结构中的二叉树 1. 二叉树的概念及结构 1.1 二叉树的定义 定义&#xff1a;所有结点的度小于等于2的树。 上图中可以看出 二叉树不存在度大于2的结点二叉树的子树有左右之分&#xff0c;次序不能颠倒&#xff0c;因此二叉树是有序树。 任意二叉树都…
阅读更多...
springboot实战学习（6）(用户模块的登录认证)(初识令牌)(JWT)

springboot实战学习（6）(用户模块的登录认证)(初识令牌)(JWT)

接着上篇博客学习。上篇博客是在基本完成用户模块的注册接口的开发以及注册时的参数合法性校验的基础上&#xff0c;基本完成用户模块的登录接口的主逻辑。具体往回看了解的链接如下。 springboot实战学习笔记&#xff08;5&#xff09;(用户登录接口的主逻辑)-CSDN博客文章浏览…
阅读更多...
[数据结构与算法·C++版] 笔记 1.2 什么是数据结构

[数据结构与算法·C++版] 笔记 1.2 什么是数据结构

1.2 什么是数据结构 结构&#xff1a;实体 关系数据结构&#xff1a; 按照逻辑关系组织起来的一批数据&#xff0c;按一定的存储方法把它存储在计算机中在这些数据上定义了一个运算的集合 数据结构的逻辑组织 线性结构 线性表&#xff08;表&#xff0c;栈&#xff0c;队列&…
阅读更多...
科研绘图系列：R语言多个AUC曲线图（multiple AUC curves）

科研绘图系列：R语言多个AUC曲线图（multiple AUC curves）

文章目录 介绍加载R包导入数据数据预处理画图输出结果组图系统信息介绍 多个ROC曲线在同一张图上可以直观地展示和比较不同模型或方法的性能。这种图通常被称为ROC曲线图，它通过比较不同模型的ROC曲线下的面积（AUC）大小来比较模型的优劣。AUC值越大，模型的诊断或预测效果越…
阅读更多...
【Linux笔记】虚拟机内Linux内容复制到宿主机的Window文件夹（文件）中

【Linux笔记】虚拟机内Linux内容复制到宿主机的Window文件夹（文件）中

一、共享文件夹 I、Windows宿主机上创建一个文件夹 目录&#xff1a;D:\Centos_iso\shared_files II、在VMware中设置共享文件夹 1、打开VMware Workstation 2、选择需要设置的Linux虚拟机&#xff0c;点击“编辑虚拟机设置”。 3、在“选项”标签页中&#xff0c;选择“共…
阅读更多...
数模方法论-整数规划

数模方法论-整数规划

一、基本概念 非线性规划的应用包括工程设计、资源分配、经济模型等。在求解过程中&#xff0c;由于非线性特性&#xff0c;常用的方法有梯度法、牛顿法、启发式算法等。求解非线性规划问题时&#xff0c;解的存在性和唯一性通常较难保证&#xff0c;且可能存在多个局部最优解…
阅读更多...
推荐3个AI论文、AI查重、AI降重工具

推荐3个AI论文、AI查重、AI降重工具

什么是AI论文、AI查重、AI降重工具&#xff1f; AI论文 AI论文指的是以人工智能&#xff08;AI&#xff09;相关主题为研究对象的学术论文。这类论文通常包含以下内容&#xff1a; 研究问题&#xff1a;针对某个特定的AI问题或领域的研究。方法&#xff1a;介绍用于解决问题…
阅读更多...
yolov8旋转目标检测之绝缘子检测-从数据加载到模型训练、部署

yolov8旋转目标检测之绝缘子检测-从数据加载到模型训练、部署

YOLOv8 是 YOLO (You Only Look Once) 系列目标检测算法的最新版本&#xff0c;以其高速度和高精度而著称。在电力行业中&#xff0c;绝缘子是电力传输线路上的重要组件之一&#xff0c;它们用于支撑导线并保持电气绝缘。由于长期暴露在户外环境中&#xff0c;绝缘子容易出现损…
阅读更多...
Netty源码-业务流程之构建连接

Netty源码-业务流程之构建连接

Netty基本介绍&#xff0c;参考 Netty与网络编程 1、Netty构建连接 构建连接的流程 1.1 我们知道客户端连接服务端都是通过NioEventLoop来处理请求&#xff0c;NioEventLoop是一个线程&#xff0c;连接进来首先进入run()方法。 所以我们需要启动服务端&#xff0c;然后再启动…
阅读更多...
一个安卓鸿蒙化工具

一个安卓鸿蒙化工具

DevEco插件&#xff0c;为已有安卓项目鸿蒙化加速。 目前支持&#xff1a; 1、安卓Vector Assets转svg&#xff1b; 2、json转ets model&#xff1b; 3、kotlin model转ets model&#xff1b; 下载地址&#xff1a;andtoharplugin1.1.0 安装&#xff1a; deveco插件安装选硬…
阅读更多...
Java笔试面试题AI答之设计模式（2）

Java笔试面试题AI答之设计模式（2）

文章目录 6. 什么是单例模式&#xff0c;以及他解决的问题&#xff0c;应用的环境 &#xff1f;解决的问题应用的环境实现方式 7. 什么是工厂模式&#xff0c;以及他解决的问题&#xff0c;应用的环境 &#xff1f;工厂模式简述工厂模式解决的问题工厂模式的应用环境工厂模式的…
阅读更多...
我的AI工具箱Tauri版-VideoIntroductionClipCut视频介绍混剪

我的AI工具箱Tauri版-VideoIntroductionClipCut视频介绍混剪

本教程基于自研的AI工具箱Tauri版进行VideoIntroductionClipCut视频介绍混剪。 本项目为自研的AI工具箱Tauri版中的视频剪辑模块&#xff0c;专注于自动生成视频介绍片段。该模块名为 VideoIntroductionClipCut&#xff0c;用户可以通过该工具快速进行视频的混剪和介绍内容的生…
阅读更多...
Selenium元素定位：深入探索与实践

Selenium元素定位：深入探索与实践

目录 一、引言 二、Selenium元素定位基础 1. WebDriver与元素定位 2. 定位策略概览 三、ID定位 1. 特点与优势 2. 示例代码 四、Class Name定位 1. 特点与限制 2. 示例代码 五、XPath定位 1. 特点与优势 2. 示例代码 3. XPath高级用法 六、CSS Selector定位 1.…
阅读更多...
Nacos 服务注册与发现

Nacos 服务注册与发现

目录 Nacos 简介 Nacos(Dynamic Naming and Configuration Service) Nacos 安装 下载安装包 Windows 解压 目录介绍: 修改单机模式 启动 Nacos Linux 解压 单机模式启动 Nacos 快速上手 服务注册和发现 Nacos 负载均衡 服务下线 权重配置 开启 Nacos 负载均衡…
阅读更多...
LeetCode --- 139双周赛

LeetCode --- 139双周赛

题目列表 3285. 找到稳定山的下标 3286. 穿越网格图的安全路径 3287. 求出数组中最大序列值 3288. 最长上升路径的长度 一、找到稳定山的下标 遍历数组&#xff0c;统计符合要求的答案即可&#xff0c;代码如下 class Solution { public:vector<int> stableMountai…
阅读更多...
【开源免费】基于SpringBoot+Vue.JS服装商城系统（JAVA毕业设计）

【开源免费】基于SpringBoot+Vue.JS服装商城系统（JAVA毕业设计）

本文项目编号 T 046 &#xff0c;文末自助获取源码 \color{red}{T046&#xff0c;文末自助获取源码} T046&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 新…
阅读更多...
【C++】仿函数

【C++】仿函数

&#x1f525;个人主页&#x1f525;&#xff1a;孤寂大仙V &#x1f308;收录专栏&#x1f308;&#xff1a;C从小白到高手 &#x1f339;往期回顾&#x1f339;&#xff1a;【C】list常见用法 &#x1f516; 流水不争&#xff0c;争的是滔滔不息。 文章目录 一、仿函数的介绍…
阅读更多...
网安面试会问到的：http的长连接和短连接

网安面试会问到的：http的长连接和短连接

《网安面试指南》http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247484339&idx1&sn356300f169de74e7a778b04bfbbbd0ab&chksmc0e47aeff793f3f9a5f7abcfa57695e8944e52bca2de2c7a3eb1aecb3c1e6b9cb6abe509d51f&scene21#wechat_redirect 《Java代码审…
阅读更多...
毕业设计选题：基于ssm+vue+uniapp的智能停车场管理系统小程序

毕业设计选题：基于ssm+vue+uniapp的智能停车场管理系统小程序

开发语言&#xff1a;Java框架&#xff1a;ssmuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;M…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023