矢量化图形工具VTracer

最新推荐文章于 2024-05-23 10:04:54 发布

杨浦老苏

最新推荐文章于 2024-05-23 10:04:54 发布

阅读量5.2k

点赞数

文章标签：群晖 docker 工具图片

本文链接：https://blog.csdn.net/wbsu2004/article/details/127313114

版权

什么是 VTracer ?

VTracer 是 GitHub 上一款开源工具，可快速将 JPG、PNG 等格式的图片快速转换为 SVG 矢量图，并支持过滤斑点、色彩精度、曲线拟合等多种参数配置。

与 Adobe Illustrator 的 Image Trace 相比，VTracer 的输出更加紧凑（形状更少），相关算法的技术说明，可以访问： https://www.visioncortex.org/vtracer-docs

如果不想自己搭建，官方还提供了演示网站：https://www.visioncortex.org/vtracer/

构建镜像

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

VTracer 及其核心库是在 Rust 中实现的，而我们折腾的这个 webapp 是基于 Rust + wasm 平台实现的，官方没有提供 Dockerfile ，老苏是第一次接触，官方的说明又太简洁，所以走了比较多的弯路，好在最后可以正常运行了

第一版没啥意义，就是研究环境搭建，目录结构，编出来的镜像高达 2.7G

FROM node:16.5 as build-base

RUN apt-get update \
    && apt-get install -y git build-essential curl musl-dev

# install rust
RUN curl https://sh.rustup.rs -sSf | bash -s -- -y 

# Add .cargo/bin to PATH
ENV PATH="/root/.cargo/bin:${PATH}"

# Check cargo is visible
RUN cargo --help

# install wasm-pack
RUN curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

WORKDIR /app
COPY . .

#RUN npm install -g wasm-pack 

WORKDIR /app/webapp/app
RUN npm install
RUN wasm-pack build
RUN npm run build

EXPOSE 8080

下面是采用多阶段构建的最终版本的 Dockerfile，只有不到 50M

FROM node:16.5 as build-base

RUN apt-get update \
    && apt-get install -y git build-essential curl

# Install rust
RUN curl https://sh.rustup.rs -sSf | bash -s -- -y 

# Add .cargo/bin to PATH
ENV PATH="/root/.cargo/bin:${PATH}"

# Check cargo is visible
RUN cargo --help

# Install wasm-pack
RUN curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

WORKDIR /app
COPY . .

WORKDIR /app/webapp/app
RUN npm install
RUN wasm-pack build
RUN npm run build

FROM nginx:1.12-alpine
LABEL maintainer=laosu<wbsu2003@gmail.com>

COPY --from=build-base /app/docs /usr/share/nginx/html
COPY --from=build-base /app/webapp/app/dist /usr/share/nginx/html

# Add the WASM mime type
RUN echo "types { application/wasm wasm; }" >>/etc/nginx/mime.types

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

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

# 下载代码
git clone https://github.com/visioncortex/vtracer.git

# 或通过代理下载
git clone https://ghproxy.com/github.com/visioncortex/vtracer.git

# 进入目录
cd vtracer

# 将 Dockerfile 放入当前目录

# 构建镜像
docker build -t wbsu2003/vtracer:v1 .

# 运行容器
docker run -d \
   --name vtracer \
   -p 7930:80 \
   wbsu2003/vtracer:v1

安装

在群晖上以 Docker 方式安装。

在注册表中搜索 vtracer ，选择第二个 wbsu2003/vtracer，版本选择 latest。

端口

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

# 查看端口占用
netstat -tunlp | grep 端口号

本地端口	容器端口
`7930`	`80`

命令行安装

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

# 运行容器
docker run -d \
   --restart unless-stopped \
   --name vtracer \
   -p 7930:80 \
   wbsu2003/vtracer

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

version: '3'

services:
  vtracer:
    image: wbsu2003/vtracer
    container_name: vtracer
    restart: unless-stopped
    ports:
      - 7930:80

然后执行下面的命令

# 新建文件夹 vtracer
mkdir -p /volume2/docker/vtracer

# 进入 vtracer 目录
cd /volume2/docker/vtracer

# 将 docker-compose.yml 放入当前目录

# 一键启动
docker-compose up -d