开源趣味艺术画板Paint Board

news/2024/11/2 11:30:18/

在这里插入<a class=图片描述" />

什么是 Paint Board ?

Paint Board 是简洁易用的 Web 端创意画板。它集成了多种创意画笔和绘画功能,支持形状绘制、橡皮擦、自定义画板等操作,并可以将作品保存为图片

软件功能:

不过非常可惜,老苏最期待的数据同步还在计划中,这也意味着软件宣传的多端操作,还没有实现

另外也没有看到分享,图片也只能保存为 png 格式,不过软件还是很有特色的,家里有小朋友,可以用来做个创意涂鸦板

不想自己安装,可以试试官方提供的在线演示:https://songlh.top/paint-board

构建镜像

如果你不想自己构建,可以跳过,直接阅读下一章节

官方提供了 Dockerfile ,但需要我们自己改一下

Dockerfile 中第一行需要将 FROM node:16-alpine as build-stage 修改为 FROM node:18-alpine as build-stage

否则会在构建时报错

[build-stage 4/4] RUN echo "https://registry.npmmirror.com" > .npmrc &&     npm install -g pnpm &&     pnpm install --fr  89.6s=> => # npm WARN EBADENGINE Unsupported engine {                              => => # npm WARN EBADENGINE   package: 'pnpm@9.12.2',                         => => # npm WARN EBADENGINE   required: { node: '>=18.12' },                  => => # npm WARN EBADENGINE   current: { node: 'v16.20.2', npm: '8.19.4' }    => => # npm WARN EBADENGINE }

构建镜像和容器运行的基本命令如下👇

构建时,软件对应的版本为 1.4.1

# 下载代码
git clone https://github.com/LHRUN/paint-board.git# 进入目录  
cd paint-board# 构建镜像
docker build -t wbsu2003/paint-board:v1 .# 修改 Dockerfile 中基础镜像的版本# 运行容器
docker run -d \--name paint-board \-p 8080:80 \wbsu2003/paint-board:v1

安装

群晖上以 Docker 方式安装。

在注册表中搜索 wbsu2003 ,找到 wbsu2003/paint-board,版本选择 latest

端口

本地端口不冲突就行,不确定的话可以用命令查一下

# 查看端口占用
netstat -tunlp | grep 端口号
本地端口容器端口
503780

命令行安装

如果你熟悉命令行,可能用 docker cli 更快捷

# 运行容器
docker run -d \--name paint-board \-p 5037:80 \wbsu2003/paint-board

也可以用 docker-compose 安装,将下面的内容保存为 docker-compose.yml 文件

version: '3'services:paint-board:image: wbsu2003/paint-boardcontainer_name: paint-boardrestart: unless-stoppedports:- 5037:80

然后执行下面的命令

# 新建文件夹 paint-board
mkdir -p /volume1/docker/paint-board# 进入 paint-board 目录
cd /volume1/docker/paint-board# 将 docker-compose.yml 放入当前目录# 一键启动
docker-compose up -d

运行

软件对浏览器版本要求不高,建议使用最新版 Google Chrome,以下为最低支持版本

Edge
Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
80+80+70+13+

在浏览器中输入 http://群晖IP:5037 就能看到主界面

随手涂鸦

软件的使用很简单,不会可以去看看视频教程:https://www.bilibili.com/video/BV1dJ4m1h7vg

参考文档

LHRUN/paint-board: 🎨 A powerful multi-end drawing board that brings together a lot of creative brushes to experience a whole new range of drawing effects!
地址:https://github.com/LHRUN/paint-board

paint-board
地址:https://songlh.top/paint-board/


http://www.ppmy.cn/news/1543853.html

相关文章

躺平成长-下一个更新的数据(躺平成长数据显示核心)

旭日图&#xff08;Sunburst Chart&#xff09;是一种用于展示具有层次结构数据的可视化图表。 它起源于饼图和环形图&#xff0c;并随着数据可视化需求的发展而演变。 旭日图通过将层次结构数据以由内向外的同心圆环形式展示&#xff0c;使数据的层次关系更加清晰直观。 以下…

golang的RSA加密解密

参考&#xff1a;https://blog.csdn.net/lady_killer9/article/details/118026802 1.加密解密工具类PasswordUtil.go package utilimport ("crypto/rand""crypto/rsa""crypto/x509""encoding/pem""fmt""log"&qu…

分享一个生成二维码的js

生成二维码js https://pan.quark.cn/s/826a69dba5b3 提取码&#xff1a;WrrC 生成二维码js&#xff0c;并可设置边距border https://pan.quark.cn/s/18251a515fb2 提取码&#xff1a;psSr 在线生成二维码&#xff1a;https://www.51bj.top/tools/qrcode.html

如何实现图片懒加载,原生 + React 实现方式

前言 有时候列表存在许多图片&#xff0c;那么一次性加载会阻塞 http 请求&#xff0c;为了避免在可视窗口之外的元素进行不必要的图片加载&#xff0c;可以尝试使用懒加载进行优化。懒加载可以显著提高页面加载性能&#xff0c;特别是当页面包含大量图片时。为了实现延迟加载…

深度学习中的核心概念详解

目录 前言1. 深度神经网络与残差网络1.1 深度神经网络的挑战1.2 残差网络的提出与实现1.3 残差网络的作用 2. 词向量&#xff1a;语义理解的基础2.1 词向量的基本概念2.2 词向量的实现方法与作用 3. 对象嵌入&#xff1a;从词向量到对象表示3.1 对象嵌入的概念3.2 对象嵌入的应…

【SSM详细教程】-15-Spring Restful风格【无敌详细】

精品专题&#xff1a; 01.《C语言从不挂科到高绩点》课程详细笔记 https://blog.csdn.net/yueyehuguang/category_12753294.html?spm1001.2014.3001.5482 02. 《SpringBoot详细教程》课程详细笔记 https://blog.csdn.net/yueyehuguang/category_12789841.html?spm1001.20…

聊一聊Elasticsearch的基本原理与形成机制

1、搜索引擎的基本原理 通常搜索引擎包括&#xff1a;数据采集、文本分析、索引存储、搜索等模块&#xff0c;它们之间的协作流程如下图&#xff1a; 数据采集模块负责采集需要搜索的数据源。 文本分析模块是将结构化数据中的长文本切分成有实际意义的词&#xff0c;这样用户…

EMR Serverless Spark:一站式全托管湖仓分析利器

本文根据2024云栖大会实录整理而成&#xff0c;演讲信息如下&#xff1a; 演讲人&#xff1a; 李钰&#xff08;绝顶&#xff09; | 阿里云智能集团资深技术专家&#xff0c;阿里云 EMR 团队负责人 活动&#xff1a; 2024 云栖大会 AI - 开源大数据专场 数据平台技术演变 …