在线图片编辑器miniPaint

什么是 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/