什么是 miniPaint ?
miniPaint
是一个开源的在线图像编辑器,使用HTML5
技术实现,无需购买、下载和安装软件,也不需要安装任何插件或过时的Flash
即可使用。miniPaint
直接在浏览器中运行。您可以创建图像、从剪贴板粘贴 (ctrl+v
) 或从计算机上传(使用菜单或拖放)。不会将任何内容发送到任何服务器。一切都保留在您的浏览器中。
软件主要功能:
- 文件:打开图像、目录、
URL
、数据URL
,拖放,保存(PNG
、JPG
、BMP
、WEBP
、动画GIF
、TIFF
、JSON
(图层数据),打印。 - 编辑:撤消、剪切、复制、粘贴、选择、从剪贴板粘贴。
- 图像:信息、
EXIF
、裁剪、缩放、调整大小(Hermite
采样、默认调整大小)、旋转、翻转、颜色校正(亮度、对比度、色调、饱和度、亮度)、自动调整颜色、网格、直方图、反相。 - 图层:多图层系统、差异、合并、平铺、支持透明度。
- 特效:黑白、模糊(盒状、高斯、堆叠、缩放)、鼓起/收缩、降噪、去色、抖动、点阵、边缘、浮雕、丰富、伽马、颗粒、灰度、热图、JPG压缩、马赛克、油画、棕褐色、锐化、反曝光、移轴、晕影、颜色振动、复古、蓝图、夜视、铅笔,还有
Instagram
滤镜:1977
、Aden
、Clarendon
、Gingham
、Inkwell
、Lo-fi
、Toaster
、Valencia
、X-Pro II
。 - 工具:铅笔、画刷、魔术棒、橡皮擦、填充、取色器、字母、裁剪、模糊、锐化、去色、克隆、边框、精灵、关键点、颜色缩放、替换颜色、恢复透明度、内容填充。
- 帮助:键盘快捷键、翻译。
官方提供了在线试用,地址:https://viliusle.github.io/miniPaint
构建镜像
如果你不想自己构建,可以跳过,直接阅读下一章节
官方没有提供 Docker
镜像,也没有在源码中找到 Dockerfile
文件,老苏后来是在 wiki
中找到的
源文件地址:https://github.com/viliusle/miniPaint/wiki/Docker/4edb045378d1d535bc19873d4492f519a0b99a31
#Written by Ange Cesari
# Use official Node.js based on Alpine
FROM node:16-alpine
# Create dir for application
WORKDIR /usr/src/app
# Copy package.json and package-lock.json
COPY package*.json ./
# Install dependencies
RUN npm i
# Copy the rest of the application code
COPY . .
# Expose the port the application will run on
EXPOSE 8080
# Run the application
CMD ["npm", "run", "server"]
接下来要修改根目录下的 webpack.config.js
文件,找到 devServer
代码块
增加 一行代码,跳过主机检查,好处是省事,坏处是不安全,建议不要暴露到公网运行
当设置为
'all'
时,此选项将跳过主机检查。所以不建议这样做,因为不检查主机的应用程序容易受到DNS
重新绑定攻击。
allowedHosts: "all",
构建镜像和容器运行的基本命令如下👇
# 下载代码
git clone https://github.com/viliusle/miniPaint.git
# 进入目录
cd miniPaint
# 将 Dockerfile 放入当前目录
# 修改 webpack.config.js 文件
# 构建镜像
docker build -t wbsu2003/minipaint:v1 .
# 运行容器
docker run -d \
--name minipaint \
-p 3584:8080 \
wbsu2003/minipaint:v1
安装
在群晖上以 Docker 方式安装。
在注册表中搜索 minipaint
,下拉找到 wbsu2003/minipaint
,版本选择 latest
。
端口
本地端口不冲突就行,不确定的话可以用命令查一下
# 查看端口占用
netstat -tunlp | grep 端口号
本地端口 | 容器端口 |
---|---|
3584 | 8080 |
命令行安装
如果你熟悉命令行,可能用 docker cli
更快捷
# 运行容器
docker run -d \
--restart unless-stopped \
--name minipaint \
-p 3584:8080 \
wbsu2003/minipaint
也可以用 docker-compose
安装,将下面的内容保存为 docker-compose.yml
文件
version: '3'
services:
minipaint:
image: wbsu2003/minipaint
container_name: minipaint
restart: unless-stopped
ports:
- 3584:8080
然后执行下面的命令
# 新建文件夹 minipaint
mkdir -p /volume1/docker/minipaint
# 进入 minipaint 目录
cd /volume1/docker/minipaint
# 将 docker-compose.yml 放入当前目录
# 一键启动
docker-compose up -d
运行
一般情况下,现在就可以在浏览器中输入 http://群晖IP:3584
进行访问了,但是 miniPaint
可能会有不同,在群晖上可能很大概率你会发现容器是停止状态,或者处于不断重启的状态
不要慌,进日志看看,是不是能找到下面👇这个错误?
Error: ENOSPC: System limit for number of file watchers reached
如果不是,那就只能具体情况具体分析了,如果是,请按照后面的步骤操作,以下操作需使用
ssh
客户端连上群晖后,在命令行进行操作
这个错误的原因是指系统中的文件监视器数量达到了限制,可以通过执行以下命令检查当前 inotify
文件监视限制
# 检查当前 inotify 文件监视限制
cat /proc/sys/fs/inotify/max_user_watches
您可以通过以下方式临时设置新限制
# 临时设置新限制
sudo sysctl fs.inotify.max_user_watches=131070
# 加载并应用系统参数配置文件
sudo sysctl -p
或者您可以设置永久限制
# 可以设置永久限制
echo fs.inotify.max_user_watches = 524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
完成上面这些操作后,再次启动容器,在浏览器中输入 http://群晖IP:3584
就能看到主界面
设置中文
菜单栏中 Tools
--> Language
--> 简体中文
设置完成后,界面直接就变成了中文了
祝大家周末愉快~
参考文档
viliusle/miniPaint: online image editor
地址:https://github.com/viliusle/miniPaint
miniPaint - image editor
地址:https://viliusle.github.io/miniPaint/
Docker · viliusle/miniPaint Wiki
地址:https://github.com/viliusle/miniPaint/wiki/Docker/4edb045378d1d535bc19873d4492f519a0b99a31
Run miniPaint - Browser Based Image Editor - in Docker - YouTube
地址:https://www.youtube.com/watch?v=hjjMTyJJz3c
node.js - Nodemon Error: “System limit for number of file watchers reached” - Stack Overflow
地址:https://stackoverflow.com/questions/53930305/nodemon-error-system-limit-for-number-of-file-watchers-reached
DevServer | webpack
地址:https://webpack.js.org/configuration/dev-server/