前言

PaintBoard 是一款开源在线自由画工具，支持多端浏览器访问，无需安装客户端即可绘画。它提供丰富画笔和调色功能，让创作简单有趣。
16-9
本教程将演示如何在 VPS 或 NAS 上通过 Docker 快速部署 PaintBoard，轻松搭建自己的在线画板环境，实现随时随地创作。

项目图片

以下是与该项目相关的一些图片：
主页面

demo

官方demo

已完成的功能

绘图模式

自由式
提供12种不同风格的画笔，包括：
- 基本画笔
- 彩虹画笔
- 多形状画笔
- 多材质画笔
- 像素画笔
- 多色画笔
- 文字画笔
- 多线连接画笔
- 网状画笔
- 多点连接画笔
- 摆动画笔
- 刺画笔
所有画笔都支持颜色和画笔宽度配置
多形状、多材质、多颜色等画笔支持自定义配置

形状绘制

提供多种常用形状供绘制
支持多点线段和箭头
支持边框和填充样式

橡皮擦模式

线性擦除所有内容
支持线性宽度配置

选择模式

可通过点击框选绘图内容
点击手柄支持拖动、缩放和旋转操作
提供灵活的编辑功能
选择图像支持多种过滤器配置
选择文本时可进行字体和样式设置
支持图层设置，包括上移图层、下移图层、移动到顶部、移动到底部
支持透明度配置
支持橡皮擦或不可擦除配置

绘图板配置

支持背景配置，包括颜色、背景图像和透明度
支持自定义宽度和高度配置
支持绘画缓存
- 启用缓存可在大量绘画内容下提高性能
- 禁用缓存可提高画布清晰度
添加指导线绘制功能

多功能菜单

左下方按钮显示当前缩放比例，点击可重置
中间按钮列表（左到右）：
- 撤消
- 重做
- 复制当前选择
- 删除当前选择
- 绘制文本
- 上传图像
- 清除绘图
- 另存为图像
- 打开文件列表
上传图片支持背景去除、图片分割（需浏览器支持 WebGPU）
另存为图像支持自定义配置
支持旋转、缩放、裁剪

操作方式

个人电脑

按住空格键 + 鼠标左键移动画布
滚动鼠标滚轮缩放画布
按住 Backspace 键删除选择内容
按住 Ctrl + V 粘贴剪贴板图像

移动设备

双指按下拖动和缩放画布

多文件配置

支持多个画布切换
每个画布可自定义标题、添加、删除
提供上传下载功能

国际化

支持语言：
- 中文(简体)
- 中文(繁体)
- 英语
- 日本语
- 한국어

PWA支持

支持离线访问

部署方法

使用Docker安装

本教程使用docker的方式安装部署,简单便捷
164b6ac419e23bc5390dc46601a202bf

准备条件

1）一台服务器或者NAS

我们使用飞牛云NAS和VPS来演示
需要vps的可以看以下信息
莱卡云官网

2）本项目使用到的github

https://github.com/LHRUN/paint-board

目前有2.4k个 stars
更多功能或者二次修改可以访问GitHub

3）域名(可选)

域名可以根据自己的需求绑定

①《飞牛NAS上搭建》

新建项目：

paint-board

compose配置如下：

services:
  paint-board:  # 服务名称
    image: ywsj/paint-board:latest  # 使用的镜像
    container_name: paint-board  # 容器名称
    ports:
      - "8020:80"  # 端口映射，宿主机8020端口映射到容器80端口
    restart: always  # 容器重启策略，总是重启

启动即可

正常启动

打开
飞牛云的
ip:8020(防火墙放开)
端口即可打开

补充docker可用的镜像仓库

国内如果无法拉取镜像的可以使用
仓库1

https://1ms.run/

仓库2

https://docker.ywsj.tk/

仓库3

https://mirror.azure.cn/

仓库4

https://hub.rat.dev/

仓库5

https://docker.1ms.run

仓库6

https://docker.itelyou.cf/

仓库7

https://abc.itelyou.cf/

②《vps上搭建》

一、Docker环境部署

在vps安装docker和docker-compose
Docker官方安装文档（英文）
https://duan.yyzq.eu.org/docker-001
Docker-Compose官方安装文档（英文)
https://duan.yyzq.eu.org/docker-002
Centos安装Docker和Docker-compose（中文）
https://duan.yyzq.eu.org//03
Ubuntu安装Docker和Docker-compose（中文）
https://duan.yyzq.eu.org//04

推荐直接用一键脚本

docker安装脚本

bash <(curl -sSL https://cdn.jsdelivr.net/gh/SuperManito/LinuxMirrors@main/DockerInstallation.sh)

docker-compose安装脚本

curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose && chmod +x /usr/local/bin/docker-compose

二、创建docker-compose.yml文件

mkdir paint-board;cd paint-board  #创建一个目录，并进入此目录

然后再新建docker-compose.yml

vim docker-compose.yml

services:
  paint-board:  # 服务名称
    image: ywsj/paint-board:latest  # 使用的镜像
    container_name: paint-board  # 容器名称
    ports:
      - "8020:80"  # 端口映射，宿主机8020端口映射到容器80端口
    restart: always  # 容器重启策略，总是重启

三、执行容器运行命令

docker-compose up -d #运行容器

docker-compose ps  #查看是否开启成功

正常启动如下所示

docker-compose ps
NAME          IMAGE                     COMMAND                  SERVICE       CREATED          STATUS          PORTS
paint-board   ywsj/paint-board:latest   "/docker-entrypoint.…"   paint-board   21 minutes ago   Up 21 minutes   0.0.0.0:8020->80/tcp, [::]:8020->80/tcp

四、打开web页面使用

成功以后需要打开自己相应的端口(8020)防火墙就可以web端访问了

http://ip:8020

③《dockge上搭建》

直接复制docker-compose内容然后启动即可

绑定域名

如需绑定域名的自行绑定
绑定域名可以参考
NginxProxyManager
https://duan.yyzq.eu.org//npm-ch
绑定完域名配置好证书就可以用域名来访问了

有任何问题可以直接留言或者问我
有任何问题可以直接留言或者问我
有任何问题可以直接留言或者问我

欢迎关注我们的微信公众号！

目录CONTENT

在VPS或NAS上用Docker搭建在线自由画工具-PaintBoard

前言