JohnieXu/exif-edit

一个基于 vue 的图片 exif 数据编辑器组件。A Vue component for exif data edit.

exif-edit

基于 vue 的图片 exif 元数据编辑、水印边框合成工具应用。

主要功能：

• exif 元数据读写
• 水印边框合成
• 图片排版合成

预览地址：https://exif-edit.vercel.app/

安装依赖

yarn install

开发环境启动

yarn serve

构建打包 demo 应用

yarn build:app

构建打包组件

yarn build:lib

构建打包 web-component

yarn build:wc

代码检查

yarn lint

生产环境启动

方式一：Node.js 使用静态资源提供 web 服务

npm run build:app
cd dist/
npx http-server .

方式二：Docker 镜像

npm run build:docker # 构建镜像
docker run -itd --name exif-edit --restart always -p 8080:80 johniexu/exif-edit:latest

方式三：Docker Compose 一键启动

docker-compose up -d

修改了代码后需要重新构建镜像 --build，并且需要先执行完 npm run build:app

docker-compose up -d --build

线上 Demo 部署

使用 vercel 部署，预览地址：https://exif-edit.vercel.app/

使用 hook 触发部署

使用 GET 请求对应的 hook 地址即可触发vercel 自动构建部署

# 触发 master 分支部署
curl -X GET https://api.vercel.com/v1/integrations/deploy/prj_ZvCedzuUkl1foP4QqcfjfUG1PfkR/qH9ujkhdFR

分支	hook
master	https://api.vercel.com/v1/integrations/deploy/prj_ZvCedzuUkl1foP4QqcfjfUG1PfkR/qH9ujkhdFR

打包发布

发布 Docker 镜像

docker tag johniexu/exif-edit:latest johniexu/exif-edit:latest
docker push johniexu/exif-edit:latest

效果预览

默认状态

显示 Exif 数据

编辑 Exif 数据

校验不支持格式的图片

校验无 Exif 数据

读取的图片无 Exif 数据