5分钟使用Docker部署Paint Board快速打造专属在线画板应用
文章目录
- 前言
- 1.关于Paint Board
- 2.本地部署paint-board
- 3.使用Paint Board
- 4.cpolar内网穿透工具安装
- 5.创建远程连接公网地址
- 6.固定Paint Board公网地址
💡 推荐
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【点击跳转到网站】
前言
嘿,各位手绘达人们,是不是经常遇到这样的情况:灵感如泉水般涌现时,却因为那些复杂得让人头大的专业绘图软件而瞬间打消了创作热情?别担心!今天我要给大家安利一款超轻量级、超好玩的Web画板——Paint Board!这款神器简直是为创意人量身定做的。无论你是设计新手还是老司机,都能轻松上手,界面简洁到让人爱不释手,操作流畅得像丝绸一样顺滑。想象一下,在忙碌的工作间隙或悠闲的周末时光里,你只需要打开浏览器就能立刻进入自己的创作天堂,是不是感觉特别过瘾?而且,Paint Board 的魅力远不止于此!接下来的内容将会带你轻松实现随时随地访问心爱画板的梦想。
【视频教程】
分享一款超好用的开源画板paint board
1.关于Paint Board
Paint Board是简洁易用的web端创意画板。它集成了多种创意画笔和绘画功能,支持形状绘制、橡皮擦、自定义画板等操作,并可以将作品保存为图片。

Github地址:GitHub - LHRUN/paint-board:🎨一个强大的多端绘图板,汇集了许多创意画笔,可以体验一系列全新的绘图效果!
以下是Paint Board的功能特性:
1.自由绘画:
提供了 12 种不同风格的画笔,包括基本画笔,彩虹画笔,多形状画笔,多素材画笔,像素画笔,多色画笔,文字画笔,多线连接画笔,网状画笔,多点连接画笔,波浪曲线画笔,荆棘画笔。以满足多样化的绘画需求。
所有画笔均支持颜色和画笔宽度的配置,另外多形状、多素材、多色等画笔支持定制化配置。
2.形状绘制:
提供了多种常见形状的绘制,并支持多端点线段以及箭头,并且这些形状均支持边框和填充的样式配置。
3.橡皮擦模式:
橡皮擦模式可线性擦除所有内容,并支持线性宽度配置。
4.选择模式:
在选择模式下,可以通过点击绘画内容进行框选。点击手柄支持拖拽、缩放和旋转操作,提供灵活的编辑方式。
选择图片支持多种滤镜配置。
选择文字时,支持字体和样式设置。
所有绘制内容均支持图层设置,包括向上移动层级、向下移动层级、移动至顶层和移动至底层。
所有绘制内容支持透明度配置。
5.画板配置:
画板支持配置背景配置, 包括颜色, 背景图, 透明度。
画板支持自定义宽高配置。
支持绘画缓存,在存在大量绘制内容的情况下,启用缓存将提高绘制性能,而禁用缓存则会提升画布清晰度。
新增辅助线绘制功能。
6.多功能菜单:
左下角按钮实时显示当前缩放比例,点击即可重置缩放比例。
中间按钮列表按从左到右的功能分别为:撤销、反撤销、复制当前选择内容、删除当前选择内容、绘制文字、上传图片、清除绘制内容、保存为图片、打开文件列表。
上传图片支持去除背景(浏览器需支持WebGPU)
保存为图片支持自定义配置. 旋转, 缩放, 裁切
7.电脑端:
按住 Space 键并点击鼠标左键可移动画布,滚动鼠标滚轮实现画布缩放。
按住 Backspace 键可删除已选内容。
同时按住 Ctrl 键 + V 键可粘贴剪贴板图片。
8.移动端:
支持双指按压后拖拽和缩放画布。
9.多文件配置:
支持多个画布切换,每个画布可自定义标题、增加、删除,并提供上传和下载功能。
10.国际化:
目前支持中文,英文两种语言展示。
11.支持 PWA, 可离线访问
2.本地部署paint-board
本例使用Docker进行部署,如果没有安装Docker,可以查看这篇教程进行安装:《Docker安装教程——Linux、Windows、MacOS》
首先打开终端输入这行命令先下载代码
git clone https://github.com/LHRUN/paint-board.git

进入到目录后
cd paint-board
再来构建镜像
sudo docker build -t wbsu2003/paint-board:v1 .

最后运行容器即可:
sudo docker run -d \--name paint-board \-p 8080:80 \wbsu2003/paint-board:v1

现在就已经安装成功了,您可以通过打开Web浏览器输入localhost:8080,就可以访问到Paint Board的页面了。
3.使用Paint Board
可以看到画板页面非常简洁明了

点击左上方的各种选项就可以开始作画了

4.cpolar内网穿透工具安装
不过我们目前只能在本地局域网内访问刚刚部署的Paint Board,如果想不在家中时,也能在外部网络环境远程访问本地部署的Paint Board,应该怎么办呢?我们可以使用cpolar内网穿透工具来实现远程访问本地服务的需求。无需公网IP,也不用设置路由器那么麻烦。
下面是安装cpolar步骤:
Cpolar官网地址: https://www.cpolar.com
使用一键脚本安装命令
sudo curl https://get.cpolar.sh | sh

安装完成后,执行下方命令查看cpolar服务状态:(如图所示即为正常启动)
sudo systemctl status cpolar

Cpolar安装和成功启动服务后,在浏览器上输入ubuntu主机IP加9200端口即:【http://localhost:9200】访问Cpolar管理界面,使用Cpolar官网注册的账号登录,登录后即可看到cpolar web 配置界面,接下来在web 界面配置即可:

5.创建远程连接公网地址
登录cpolar web UI管理界面后,点击左侧仪表盘的隧道管理——创建隧道:
- 隧道名称:可自定义,本例使用了: Paint,注意不要与已有的隧道名称重复
- 协议:http
- 本地地址:8080
- 域名类型:随机域名
- 地区:选择China Top

创建成功后,打开左侧在线隧道列表,可以看到刚刚通过创建隧道生成了两个公网地址,接下来就可以在其他电脑(异地)上,使用任意一个地址在浏览器中访问即可。

如下图所示,成功实现使用公网地址异地远程访问本地部署的Paint Board。

小结
为了方便演示,我们在上边的操作过程中使用cpolar生成的HTTP公网地址隧道,其公网地址是随机生成的。这种随机地址的优势在于建立速度快,可以立即使用。然而,它的缺点是网址是随机生成,这个地址在24小时内会发生随机变化,更适合于临时使用。
如果有长期使用Paint Board远程画画,或者异地访问与使用其他本地部署的服务的需求,但又不想每天重新配置公网地址,还想让公网地址好看又好记并体验更多功能与更快的带宽,那我推荐大家选择使用固定的二级子域名方式来配置公网地址。
6.固定Paint Board公网地址
由于以上使用cpolar所创建的隧道使用的是随机公网地址,24小时内会随机变化,不利于长期远程访问。因此我们可以为其配置二级子域名,该地址为固定地址,不会随机变化。
点击左侧的预留,选择保留二级子域名,地区选择china top,然后设置一个二级子域名名称,填写备注信息,点击保留。

保留成功后复制保留的二级子域名地址:

登录cpolar web UI管理界面,点击左侧仪表盘的隧道管理——隧道列表,找到所要配置的隧道,点击右侧的编辑。

修改隧道信息,将保留成功的二级子域名配置到隧道中
- 域名类型:选择二级子域名
- Sub Domain:填写保留成功的二级子域名
- 地区: China Top
点击更新

更新完成后,打开在线隧道列表,此时可以看到随机的公网地址已经发生变化,地址名称也变成了保留和固定的二级子域名名称。

最后,我们使用固定的公网地址访问Paint Board可以看到访问成功,一个永久不会变化的远程访问方式即设置好了。

各位小伙伴们,是不是觉得 Paint Board 真的是创意人必备的神器呢?快来试试吧,让灵感随时都能自由飞翔。如果你在使用过程中有任何问题或心得体会,欢迎在评论区留言交流哦!我可是超期待看到你们的精彩作品,说不定还能发现下一个梵高呢!
相关文章:
5分钟使用Docker部署Paint Board快速打造专属在线画板应用
文章目录 前言1.关于Paint Board2.本地部署paint-board3.使用Paint Board4.cpolar内网穿透工具安装5.创建远程连接公网地址6.固定Paint Board公网地址 💡 推荐 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住…...
vue实现根据点击或滑动展示对应高亮
页面需求: 点击左侧版本号,右侧展示对应版本内容并置于顶部右侧某一内容滚动到顶部时,左侧需要展示高亮 实现效果: 实现代码: <template><div><div class"historyBox pd-20 bg-white">…...
java练习(41)
ps:题目来自力扣 最接近的三数之和 给你一个长度为 n 的整数数组 nums 和 一个目标值 target。请你从 nums 中选出三个整数,使它们的和与 target 最接近。 返回这三个数的和。 假定每组输入只存在恰好一个解。 import java.util.Arrays;class Solut…...
【二分查找 图论】P8794 [蓝桥杯 2022 国 A] 环境治理|普及
本文涉及的基础知识点 本博文代码打包下载 C二分查找 C图论 [蓝桥杯 2022 国 A] 环境治理 题目描述 LQ 国拥有 n n n 个城市,从 0 0 0 到 n − 1 n - 1 n−1 编号,这 n n n 个城市两两之间都有且仅有一条双向道路连接,这意味着任意两…...
Docker镜像面试题及参考答案
目录 Docker 镜像与容器的关系是什么?如何理解 “镜像为静态定义,容器为运行时实体”? 解释 Docker 镜像的联合文件系统(UnionFS)分层机制,为何这种设计能优化存储效率? Docker 镜像的 LABEL 标签有什么作用?如何通过标签管理多版本镜像? 镜像的 latest 标签有哪些…...
浅显易懂HashMap的数据结构
HashMap 就像一个大仓库,里面有很多小柜子(数组),每个小柜子可以挂一串链条(链表),链条太长的时候会变成更高级的架子(红黑树)。下面用超简单的例子解释: 壹…...
Fisher信息矩阵与Hessian矩阵:区别与联系全解析
Fisher信息矩阵与Hessian矩阵:区别与联系全解析 在统计学和机器学习中,Fisher信息矩阵(FIM)和Hessian矩阵是两个经常出现的概念,它们都与“二阶信息”有关,常用来描述函数的曲率或参数的敏感性。你可能听说…...
【HTML— 快速入门】HTML 基础
准备工作 vscode下载 百度网盘 Subline Text 下载 Sublime Text下载 百度网盘 vscode 下载 Sublime Text 是一款轻量好用的文本编辑器,我们在写前端代码时,使用 Sublime Text 打开比使用记事本打开,得到的代码体验更好,比 vscode…...
Docker 与 Serverless(无服务器架构)
Serverless(无服务器架构) 是一种新的云计算架构,它通过让开发者专注于业务逻辑而无需管理服务器基础设施,来简化应用的开发和部署。Serverless 模型通常由云服务提供商管理基础设施的所有方面,而开发者只需提供代码和…...
DMA 定制固件教程:小白跟做即得单人固件,超详细纯喂饭教程,100% 成功秘籍!FPGA仿真1:1、中断逻辑和TLP核心都在。
DMA 定制固件教程 小白跟着操作做可以做出的单人固件 图文教程 链接:https://docs.qq.com/doc/DQ01lVGtHelROVHNv 本图文教程包含内容: 一、DMA仿真技术采集真实单人固件 二、网卡TLP仿真固件生成 三、DMA仿真技术io、中断逻辑,从零仿真 四、…...
嵌入式开发:傅里叶变换(4):在 STM32上面实现FFT(基于STM32L071KZT6 HAL库+DSP库)
目录 步骤 1:准备工作 步骤 2:创建 Keil 项目,并配置工程 步骤 3:在MDK工程上添加 CMSIS-DSP 库 步骤 5:编写代码 步骤 6:配置时钟和优化 步骤 7:调试与验证 步骤 8:优化和调…...
飞鱼科技游戏策划岗内推
协助策划完成相关工作,包括但不仅限于策划配置,资料搜集,游戏体验; 游戏策划相关作品;游戏大赛经历;游戏demo制作经历;游戏公司策划岗位实习经历优先 内推码 DSZP7YFU...
前端如何进行性能优化
1. 减少HTTP请求 合并文件:将多个CSS或JavaScript文件合并为一个,减少请求次数。 使用CSS Sprites:将多个小图标合并为一张大图,通过背景定位显示。 内联小资源:将小的CSS或JavaScript直接嵌入HTML中,减少…...
大白话Vuex 核心概念(state、mutations、actions)的使用案例与原理
大白话Vuex 核心概念(state、mutations、actions)的使用案例与原理 Vuex是Vue.js应用程序中专门用来管理状态的工具,就好像是一个大管家,帮你把项目里一些重要的数据和操作管理得井井有条。下面用大白话结合案例来介绍Vuex核心概…...
阿里云ack的创建与实战应用案例
阿里云ack的创建与应用案例 创建前开通ack相关服务:开始创建简单的魔方游戏,熟悉sv与clb自动注册创建部署一个nginx 服务示例:走不同域名访问不同svc资源:为什么需要 Ingress ?创建第一个域名的 Deployment和Service。…...
鸿蒙开发深入浅出01(基本环境搭建、页面模板与TabBar)
鸿蒙开发深入浅出01(基本环境搭建、页面模板与TabBar) 1、效果展示2、下载 DevEco Studio3、创建项目4、新建页面模板5、更改应用信息6、新建以下页面7、Index.ets8、真机运行9、图片资源文件 1、效果展示 2、下载 DevEco Studio 访问官网根据自己的版本…...
Vue组件:从使用到原理的深度解析
一、什么是Vue组件? 组件是Vue的核心特性之一,它允许开发者将UI拆分为独立可复用的代码片段。每个组件本质上是一个Vue实例,具有自己的: 模板(Template) 数据(Data) 方法…...
Docker部署 MongoDB及常用命令
docker 部署 docker run -d \--name mongo \-e MONGO_INITDB_ROOT_USERNAMEroot \-e MONGO_INITDB_ROOT_PASSWORD123456 \-p 27017:27017 \-v ./local-mongo-data:/data/db \mongo:latest或者编写 docker-compose.yaml 文件。如下: version: 3.1services:mongo:im…...
27.[前端开发-JavaScript基础]Day04-函数基本使用-递归-变量作用域-函数式编程
一、JavaScript函数 1 认识JavaScript函数 程序中的foo、bar、baz 认识函数 函数使用的步骤 2 函数的声明和调用 声明和调用函数 函数的参数 有参数的函数练习 函数的返回值 函数的练习 arguments参数(JS高级再学习) 3 函数的递归调用 函数中调用函数…...
mac修改docker的daemon.json 镜像文件
1、找到daemon.json文件的位置 docker info 可以看出位置在: /Users/spuer/.docker 2. 进入daemon.json 所在的目录: cd /Users/spuer/.docker3. 查看daemon.json的内容: more daemon.json可以看出,没有配置registry-mirrors&…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...
ip子接口配置及删除
配置永久生效的子接口,2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...
4. TypeScript 类型推断与类型组合
一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式,自动确定它们的类型。 这一特性减少了显式类型注解的需要,在保持类型安全的同时简化了代码。通过分析上下文和初始值,TypeSc…...
第7篇:中间件全链路监控与 SQL 性能分析实践
7.1 章节导读 在构建数据库中间件的过程中,可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中,必须做到: 🔍 追踪每一条 SQL 的生命周期(从入口到数据库执行)&#…...
给网站添加live2d看板娘
给网站添加live2d看板娘 参考文献: stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下,文章也主…...
解析奥地利 XARION激光超声检测系统:无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用
在工业制造领域,无损检测(NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统,以非接触式光学麦克风技术为核心,打破传统检测瓶颈,为半导体、航空航天、汽车制造等行业提供了高灵敏…...
Linux中《基础IO》详细介绍
目录 理解"文件"狭义理解广义理解文件操作的归类认知系统角度文件类别 回顾C文件接口打开文件写文件读文件稍作修改,实现简单cat命令 输出信息到显示器,你有哪些方法stdin & stdout & stderr打开文件的方式 系统⽂件I/O⼀种传递标志位…...
Qt的学习(一)
1.什么是Qt Qt特指用来进行桌面应用开发(电脑上写的程序)涉及到的一套技术Qt无法开发网页前端,也不能开发移动应用。 客户端开发的重要任务:编写和用户交互的界面。一般来说和用户交互的界面,有两种典型风格&…...
游戏开发中常见的战斗数值英文缩写对照表
游戏开发中常见的战斗数值英文缩写对照表 基础属性(Basic Attributes) 缩写英文全称中文释义常见使用场景HPHit Points / Health Points生命值角色生存状态MPMana Points / Magic Points魔法值技能释放资源SPStamina Points体力值动作消耗资源APAction…...
