Skip to content

docker部署 图小小pic smaller

[!介绍]

图小小使用 Vite + React，以及 OffscreenCanvas 、 WebAssembly 和 Web Worker 等现代浏览器技术，所图片都是在你的电脑本地完成的，所以速度很快。

普遍的压缩率都可以达到百分之七八十。并且可以调整输出的参数，来进一步控制图片的尺寸。 Pic Smaller – Compress JPEG, PNG, WEBP, AVIF, SVG and GIF images intelligently

[!NOTE] ### 技术实现

  • JPEG/WebP 压缩：利用了现代浏览器自带的功能，叫离屏渲染技术 OffscreenCanvas
  • PNG 压缩：采用了一个第三方的 Webassembly 实现，底层是 libPNG
  • Gif 压缩：采用了一个第三方的 Webassembly 实现，底层是 Gifsicle

功能特点

  • 多格式支持：支持JPEG、PNG、WEBP、AVIF、SVG和GIF等多种图像格式。
  • 本地压缩：所有压缩过程均在本地完成，无需担心图像数据安全。
  • 自定义配置：用户可以根据需要设置输出格式和颜色数量等。
  • 网站和移动友好：无论是桌面还是移动设备，都能轻松使用。

二开

这是一个纯vite + React项目，你必须先熟悉它们。Pic small 使用现代浏览器技术，例如OffscreenCanvas、WebAssembly和Web Worker。在开发之前你也应该熟悉它们。

[!NOTE] ## 使用方法

快速上手

Pic Smaller已经部署在Vercel平台，你可以通过访问pic-smaller.vercel.app来使用它。对于中国大陆用户，由于网络限制，可以通过访问picsmaller.com来使用这项服务。

开发环境搭建

Pic Smaller基于Vite和React构建，因此在开始之前，请确保你对这两个技术栈有所了解。项目还使用了OffscreenCanvas、WebAssembly和Web Worker等现代浏览器技术。

`# 克隆仓库 git clone https://github.com/joye61/pic-smaller.git

切换目录 cd ./pic-smaller

安装依赖 npm install

开始开发 npm run dev

`

部署指南

如果你希望在自有服务器上独立部署Pic Smaller，可以遵循基于Docker的部署文档。项目根目录下，根据Dockerfile脚本进行操作。

`#构建Docker镜像
docker build -t picsmaller .

#启动容器
docker run -p 3001:3001 -d picsmaller

部署完成后，你可以通过访问http://127.0.0.1:3001来使用Pic Smaller。

[!NOTE]

技术实现

Pic Smaller使用了多种前沿技术来实现图像压缩：

设置工作目录在 /home/compose

mkdir -p /home/compose/pic-smaller

新建文件

nano /home/compose/pic-smaller/Dockerfile

#FROM node:latest #使用现有镜像

FROM node:20-alpine

#先拉取镜像再应用这个镜像alpine，再用国内网络去拉取和安装npm的项目。
#安装git
RUN apk add git

#如果使用远程仓库，可取消注释 git clone 并删除 COPY行：

RUN git clone https://github.com/joye61/pic-smaller.git /app

WORKDIR /app

#COPY ./pic-smaller /app

#RUN apk update && apk upgrade && apk add git -y

#RUN apk add git

#RUN git clone https://github.com/joye61/pic-smaller.git

RUN set -eux \

  && npm install --ignore-scripts \

  && npm run build:preview

  #&& npm install \

  #&& npm run dev

CMD [ "npm", "run", "preview" ]

EXPOSE 3001

构建镜像

cd /home/compose/pic-smaller

docker build -t pic-smaller .

nano /home/compose/pic-smaller/docker-compose.yml

编写 docker-compose.yml

#services:

  #picsmaller:

    #image: picsmaller

    #container_name: picsmaller

    #ports:

      #- 3001:3001



services:

  picsmaller:

    image: pic-smaller

    container_name: pic-smaller

    ports:

      - 3002:3001

    restart: unless-stopped

    #volumes:

      #- ./app:/app #是dockerfile构建的的工作目录，映射进去更没用。

[!提示：]

1.构建镜像，从git仓库克隆到app目录设为工作目录，再安装npm到镜像里面去，运行镜像映射端口3002到3001. 2.推荐90%的数值，不论webp还是avif体积都不算太大，但是保留下来的细节逼真，放大300%仍然耐看。 3.上云或者分发到其他地方观看的，推荐avif=50%，比例100%的观感下保真度高适合手机等移动设备观看。60%放大后观感进一步提升，更高细节推荐90%，70-80%是个折中的方案。

启动容器

cd /home/compose/pic-smaller
docker-compose up -d

停止容器

docker-compose down

快速启停

docker-compose -f /home/compose/pic-smaller/docker-compose.yml up -d

docker-compose -f /home/compose/pic-smaller/docker-compose.yml down