标签搜索

目 录CONTENT

文章目录

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

yyzq
2025-09-02 / 0 评论 / 1 点赞 / 60 阅读 / 1,576 字

前言

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

项目图片

以下是与该项目相关的一些图片:
主页面
image-1756777673389

demo

官方demo

已完成的功能

绘图模式

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

形状绘制

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

橡皮擦模式

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

选择模式

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

绘图板配置

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

多功能菜单

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

操作方式

个人电脑

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

移动设备

  • 双指按下拖动和缩放画布

多文件配置

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

国际化

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

PWA支持

  • 支持离线访问

部署方法

使用Docker安装

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

准备条件

1)一台服务器或者NAS

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

2)本项目使用到的github

https://github.com/LHRUN/paint-board
image-1756777814007
目前有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  # 容器重启策略,总是重启

启动即可
image-1756777856227
正常启动
image-1756777868808

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

补充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

image-1756778668047

③《dockge上搭建》

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

绑定域名

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

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

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

1

评论区